<?php include('partials/app-html.php'); ?>

<head>
    <?php $pageTitle = "User Contact"; include('partials/app-meta-title.php'); ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body>

    <div class="app-wrap">

        <?php include('partials/app-header.php'); ?>

        <?php include('partials/app-sidebar.php'); ?>

        <main class="app-body">
            <div class="app-content">

                <div class="content-wrapper">

                    <?php $pageTitle = "User Contact"; $pageSubTitle1 = "Communication"; $pageSubTitle2 = "SmartAdmin"; $pageSubText = "User Contact page with notes."; include('partials/app-pagetitle.php'); ?>

                    <div class="main-content">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="border-faded bg-faded p-3 mb-g d-flex">
                                    <div class="position-relative flex-grow-1">
                                        <input type="text" id="js-filter-contacts" name="filter-contacts" class="form-control shadow-inset-2 form-control-lg" placeholder="Filter contacts by name, email, phone or location">
                                        <button id="js-clear-filter" type="button" class="btn btn-sm btn-danger position-absolute top-50 end-0 translate-middle-y me-2 d-none">
                                            <i class="fal fa-times"></i>
                                        </button>
                                    </div>
                                    <div class="btn-group btn-group-lg hidden-lg-down ms-3" role="group" aria-label="Change list & grid view">
                                        <input type="radio" class="btn-check" name="contactview" id="grid" value="grid" checked="checked">
                                        <label class="btn btn-outline-secondary" for="grid"><i class="fal fa-table"></i></label>
                                        <input type="radio" class="btn-check" name="contactview" id="table" value="table">
                                        <label class="btn btn-outline-secondary" for="table"><i class="fal fa-th-list"></i></label>
                                    </div>
                                </div>
                                <div id="filter-result-counter" class="ms-auto fs-sm text-muted mb-g"></div>
                            </div>
                        </div>

                        <div class="row" id="js-contacts">
                            <div class="col-xl-4">
                                <div id="c_1" class="card border shadow-0 mb-g shadow-sm-hover" data-filter-tags="oliver kopyov +13174562564 oliver.kopyov@smartadminwebapp.com detroit">
                                    <div class="card-body border-faded border-top-0 border-start-0 border-end-0 rounded-top">
                                        <div class="d-flex flex-row align-items-center">
                                            <span class="status status-success me-3">
                                                <span class="rounded-circle profile-image d-block " style="background-image:url('img/demo/avatars/avatar-b.png'); background-size: cover;"></span>
                                            </span>
                                            <div class="info-card-text flex-grow-1">
                                                <a href="javascript:void(0);" class="fs-xl text-truncate text-truncate-lg" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Oliver Kopyov
                                                    <i class="fal fa-angle-down d-inline-block ms-1 fs-md"></i>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Send Email</a>
                                                    <a class="dropdown-item" href="#">Create Appointment</a>
                                                    <a class="dropdown-item" href="#">Block User</a>
                                                </div>
                                                <span class="d-block text-truncate text-truncate-lg">IT Director, Webora Themes.</span>
                                            </div>
                                            <button type="button" class="js-expand-btn btn btn-sm btn-default d-none" data-bs-toggle="collapse" data-bs-target="#c_1 > .card-body + .card-body" aria-expanded="false">
                                                <span class="collapsed-hidden">+</span>
                                                <span class="collapsed-reveal">-</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body p-0 collapse show">
                                        <div class="p-3">
                                            <a href="tel:+13174562564" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mobile-alt text-muted me-2"></i> +1 317-456-2564</a>
                                            <a href="mailto:oliver.kopyov@smartadminwebapp.com" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mouse-pointer text-muted me-2"></i> oliver.kopyov@smartadminwebapp.com</a>
                                            <address class="fs-sm fw-400 mt-4 text-muted mb-0">
                                                <i class="fal fa-map-pin me-2"></i> 15 Charist St, Detroit, MI, 48212, USA
                                            </address>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div id="c_2" class="card border shadow-0 mb-g shadow-sm-hover" data-filter-tags="sesha gray +13134611347 sesha.gray@smartadminwebapp.com detroit">
                                    <div class="card-body border-faded border-top-0 border-start-0 border-end-0 rounded-top">
                                        <div class="d-flex flex-row align-items-center">
                                            <span class="status status-warning me-3">
                                                <span class="rounded-circle profile-image d-block " style="background-image:url('img/demo/avatars/avatar-c.png'); background-size: cover;"></span>
                                            </span>
                                            <div class="info-card-text flex-grow-1">
                                                <a href="javascript:void(0);" class="fs-xl text-truncate text-truncate-lg" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Sesha Gray
                                                    <i class="fal fa-angle-down d-inline-block ms-1 fs-md"></i>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Send Email</a>
                                                    <a class="dropdown-item" href="#">Create Appointment</a>
                                                    <a class="dropdown-item" href="#">Block User</a>
                                                </div>
                                                <span class="d-block text-truncate text-truncate-lg">Project Manager, Webora Themes.</span>
                                            </div>
                                            <button type="button" class="js-expand-btn btn btn-sm btn-default d-none" data-bs-toggle="collapse" data-bs-target="#c_2 > .card-body + .card-body" aria-expanded="false">
                                                <span class="collapsed-hidden">+</span>
                                                <span class="collapsed-reveal">-</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body p-0 collapse show">
                                        <div class="p-3">
                                            <a href="tel:+13174562564" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mobile-alt text-muted me-2"></i> +1 313-461-1347</a>
                                            <a href="mailto:oliver.kopyov@smartadminwebapp.com" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mouse-pointer text-muted me-2"></i> sesha.gray@smartadminwebapp.com</a>
                                            <address class="fs-sm fw-400 mt-4 text-muted mb-0">
                                                <i class="fal fa-map-pin me-2"></i> 134 Hamtrammac, Detroit, MI, 48314, USA
                                            </address>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div id="c_3" class="card border shadow-0 mb-g shadow-sm-hover" data-filter-tags="dr john cook phd +13137791347 john.cook@smartadminwebapp.com detroit">
                                    <div class="card-body border-faded border-top-0 border-start-0 border-end-0 rounded-top">
                                        <div class="d-flex flex-row align-items-center">
                                            <span class="status status-danger me-3">
                                                <span class="rounded-circle profile-image d-block " style="background-image:url('img/demo/avatars/avatar-e.png'); background-size: cover;"></span>
                                            </span>
                                            <div class="info-card-text flex-grow-1">
                                                <a href="javascript:void(0);" class="fs-xl text-truncate text-truncate-lg" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Dr. John Cook PhD
                                                    <i class="fal fa-angle-down d-inline-block ms-1 fs-md"></i>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Send Email</a>
                                                    <a class="dropdown-item" href="#">Create Appointment</a>
                                                    <a class="dropdown-item" href="#">Block User</a>
                                                </div>
                                                <span class="d-block text-truncate text-truncate-lg">Human Resources, Webora Themes.</span>
                                            </div>
                                            <button type="button" class="js-expand-btn btn btn-sm btn-default d-none" data-bs-toggle="collapse" data-bs-target="#c_3 > .card-body + .card-body" aria-expanded="false">
                                                <span class="collapsed-hidden">+</span>
                                                <span class="collapsed-reveal">-</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body p-0 collapse show">
                                        <div class="p-3">
                                            <a href="tel:+13174562564" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mobile-alt text-muted me-2"></i> +1 313-779-1347</a>
                                            <a href="mailto:oliver.kopyov@smartadminwebapp.com" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mouse-pointer text-muted me-2"></i> john.cook@smartadminwebapp.com</a>
                                            <address class="fs-sm fw-400 mt-4 text-muted mb-0">
                                                <i class="fal fa-map-pin me-2"></i> 55 Smyth Rd, Detroit, MI, 48341, USA
                                            </address>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div id="c_4" class="card border shadow-0 mb-g shadow-sm-hover" data-filter-tags="jim ketty +13137793314 jim.ketty@smartadminwebapp.com detroit">
                                    <div class="card-body border-faded border-top-0 border-start-0 border-end-0 rounded-top">
                                        <div class="d-flex flex-row align-items-center">
                                            <span class="status status-success me-3">
                                                <span class="rounded-circle profile-image d-block " style="background-image:url('img/demo/avatars/avatar-k.png'); background-size: cover;"></span>
                                            </span>
                                            <div class="info-card-text flex-grow-1">
                                                <a href="javascript:void(0);" class="fs-xl text-truncate text-truncate-lg" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Jim Ketty
                                                    <i class="fal fa-angle-down d-inline-block ms-1 fs-md"></i>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Send Email</a>
                                                    <a class="dropdown-item" href="#">Create Appointment</a>
                                                    <a class="dropdown-item" href="#">Block User</a>
                                                </div>
                                                <span class="d-block text-truncate text-truncate-lg">Staff Orgnizer, Webora Themes.</span>
                                            </div>
                                            <button type="button" class="js-expand-btn btn btn-sm btn-default d-none" data-bs-toggle="collapse" data-bs-target="#c_4 > .card-body + .card-body" aria-expanded="false">
                                                <span class="collapsed-hidden">+</span>
                                                <span class="collapsed-reveal">-</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body p-0 collapse show">
                                        <div class="p-3">
                                            <a href="tel:+13174562564" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mobile-alt text-muted me-2"></i> +1 313-779-3314</a>
                                            <a href="mailto:oliver.kopyov@smartadminwebapp.com" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mouse-pointer text-muted me-2"></i> jim.ketty@smartadminwebapp.com</a>
                                            <address class="fs-sm fw-400 mt-4 text-muted mb-0">
                                                <i class="fal fa-map-pin me-2"></i> 134 Tasy Rd, Detroit, MI, 48212, USA
                                            </address>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div id="c_5" class="card border shadow-0 mb-g shadow-sm-hover" data-filter-tags="dr john oliver oncologist +13137798134 john.oliver@smartadminwebapp.com detroit">
                                    <div class="card-body border-faded border-top-0 border-start-0 border-end-0 rounded-top">
                                        <div class="d-flex flex-row align-items-center">
                                            <span class="status status-success me-3">
                                                <span class="rounded-circle profile-image d-block " style="background-image:url('img/demo/avatars/avatar-g.png'); background-size: cover;"></span>
                                            </span>
                                            <div class="info-card-text flex-grow-1">
                                                <a href="javascript:void(0);" class="fs-xl text-truncate text-truncate-lg" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Dr. John Oliver
                                                    <i class="fal fa-angle-down d-inline-block ms-1 fs-md"></i>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Send Email</a>
                                                    <a class="dropdown-item" href="#">Create Appointment</a>
                                                    <a class="dropdown-item" href="#">Block User</a>
                                                </div>
                                                <span class="d-block text-truncate text-truncate-lg">Oncologist, Webora Themes.</span>
                                            </div>
                                            <button type="button" class="js-expand-btn btn btn-sm btn-default d-none" data-bs-toggle="collapse" data-bs-target="#c_5 > .card-body + .card-body" aria-expanded="false">
                                                <span class="collapsed-hidden">+</span>
                                                <span class="collapsed-reveal">-</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body p-0 collapse show">
                                        <div class="p-3">
                                            <a href="tel:+13174562564" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mobile-alt text-muted me-2"></i> +1 313-779-8134</a>
                                            <a href="mailto:oliver.kopyov@smartadminwebapp.com" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mouse-pointer text-muted me-2"></i> john.oliver@smartadminwebapp.com</a>
                                            <address class="fs-sm fw-400 mt-4 text-muted mb-0">
                                                <i class="fal fa-map-pin me-2"></i> 134 Gallery St, Detroit, MI, 46214, USA
                                            </address>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div id="c_6" class="card border shadow-0 mb-g shadow-sm-hover" data-filter-tags="sarah mcbrook xray +13137797613 sarah.mcbrook@smartadminwebapp.com detroit">
                                    <div class="card-body border-faded border-top-0 border-start-0 border-end-0 rounded-top">
                                        <div class="d-flex flex-row align-items-center">
                                            <span class="status status-success me-3">
                                                <span class="rounded-circle profile-image d-block " style="background-image:url('img/demo/avatars/avatar-h.png'); background-size: cover;"></span>
                                            </span>
                                            <div class="info-card-text flex-grow-1">
                                                <a href="javascript:void(0);" class="fs-xl text-truncate text-truncate-lg" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Sarah McBrook
                                                    <i class="fal fa-angle-down d-inline-block ms-1 fs-md"></i>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Send Email</a>
                                                    <a class="dropdown-item" href="#">Create Appointment</a>
                                                    <a class="dropdown-item" href="#">Block User</a>
                                                </div>
                                                <span class="d-block text-truncate text-truncate-lg">Xray Division, Webora Themes.</span>
                                            </div>
                                            <button type="button" class="js-expand-btn btn btn-sm btn-default d-none" data-bs-toggle="collapse" data-bs-target="#c_6 > .card-body + .card-body" aria-expanded="false">
                                                <span class="collapsed-hidden">+</span>
                                                <span class="collapsed-reveal">-</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body p-0 collapse show">
                                        <div class="p-3">
                                            <a href="tel:+13174562564" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mobile-alt text-muted me-2"></i> +1 313-779-7613</a>
                                            <a href="mailto:oliver.kopyov@smartadminwebapp.com" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mouse-pointer text-muted me-2"></i> sarah.mcbrook@smartadminwebapp.com</a>
                                            <address class="fs-sm fw-400 mt-4 text-muted mb-0">
                                                <i class="fal fa-map-pin me-2"></i> 13 Jamie Rd, Detroit, MI, 48313, USA
                                            </address>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div id="c_7" class="card border shadow-0 mb-g shadow-sm-hover" data-filter-tags="jimmy fellan accounting +13137794314 jimmy.fallan@smartadminwebapp.com detroit">
                                    <div class="card-body border-faded border-top-0 border-start-0 border-end-0 rounded-top">
                                        <div class="d-flex flex-row align-items-center">
                                            <span class="status status-success me-3">
                                                <span class="rounded-circle profile-image d-block " style="background-image:url('img/demo/avatars/avatar-i.png'); background-size: cover;"></span>
                                            </span>
                                            <div class="info-card-text flex-grow-1">
                                                <a href="javascript:void(0);" class="fs-xl text-truncate text-truncate-lg" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Jimmy Fellan
                                                    <i class="fal fa-angle-down d-inline-block ms-1 fs-md"></i>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Send Email</a>
                                                    <a class="dropdown-item" href="#">Create Appointment</a>
                                                    <a class="dropdown-item" href="#">Block User</a>
                                                </div>
                                                <span class="d-block text-truncate text-truncate-lg">Accounting, Webora Themes.</span>
                                            </div>
                                            <button type="button" class="js-expand-btn btn btn-sm btn-default d-none" data-bs-toggle="collapse" data-bs-target="#c_7 > .card-body + .card-body" aria-expanded="false">
                                                <span class="collapsed-hidden">+</span>
                                                <span class="collapsed-reveal">-</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body p-0 collapse show">
                                        <div class="p-3">
                                            <a href="tel:+13174562564" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mobile-alt text-muted me-2"></i> +1 313-779-4314</a>
                                            <a href="mailto:oliver.kopyov@smartadminwebapp.com" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mouse-pointer text-muted me-2"></i> jimmy.fallan@smartadminwebapp.com</a>
                                            <address class="fs-sm fw-400 mt-4 text-muted mb-0">
                                                <i class="fal fa-map-pin me-2"></i> 55 Smyth Rd, Detroit, MI, 48341, USA
                                            </address>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4">
                                <div id="c_8" class="card border shadow-0 mb-g shadow-sm-hover" data-filter-tags="arica grace accounting +13137793347 arica.grace@smartadminwebapp.com detroit">
                                    <div class="card-body border-faded border-top-0 border-start-0 border-end-0 rounded-top">
                                        <div class="d-flex flex-row align-items-center">
                                            <span class="status status-success me-3">
                                                <span class="rounded-circle profile-image d-block " style="background-image:url('img/demo/avatars/avatar-j.png'); background-size: cover;"></span>
                                            </span>
                                            <div class="info-card-text flex-grow-1">
                                                <a href="javascript:void(0);" class="fs-xl text-truncate text-truncate-lg" data-bs-toggle="dropdown" aria-expanded="false">
                                                    Arica Grace
                                                    <i class="fal fa-angle-down d-inline-block ms-1 fs-md"></i>
                                                </a>
                                                <div class="dropdown-menu">
                                                    <a class="dropdown-item" href="#">Send Email</a>
                                                    <a class="dropdown-item" href="#">Create Appointment</a>
                                                    <a class="dropdown-item" href="#">Block User</a>
                                                </div>
                                                <span class="d-block text-truncate text-truncate-lg">Accounting, Webora Themes.</span>
                                            </div>
                                            <button type="button" class="js-expand-btn btn btn-sm btn-default d-none" data-bs-toggle="collapse" data-bs-target="#c_8 > .card-body + .card-body" aria-expanded="false">
                                                <span class="collapsed-hidden">+</span>
                                                <span class="collapsed-reveal">-</span>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="card-body p-0 collapse show">
                                        <div class="p-3">
                                            <a href="tel:+13174562564" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mobile-alt text-muted me-2"></i> +1 313-779-3347</a>
                                            <a href="mailto:oliver.kopyov@smartadminwebapp.com" class="mt-1 d-block fs-sm fw-400">
                                                <i class="fal fa-mouse-pointer text-muted me-2"></i> arica.grace@smartadminwebapp.com</a>
                                            <address class="fs-sm fw-400 mt-4 text-muted mb-0">
                                                <i class="fal fa-map-pin me-2"></i> 798 Smyth Rd, Detroit, MI, 48341, USA
                                            </address>

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

                <div class="content-wrapper-right">
                    <div class="right-content bg-faded d-flex flex-column h-100">
                        <div class="flex-grow-1 p-3">
                            <style>
                                #note-content:empty:before {
                                    content: 'Start typing your note...';
                                    color: #999;
                                    font-style: italic;
                                    display: block;
                                    pointer-events: none;
                                }

                                .note-item {
                                    transition: all 0.2s ease;
                                }

                                .note-item .btn-outline-danger {
                                    opacity: 0.7;
                                    transition: opacity 0.2s ease;
                                }

                                .note-item:hover .btn-outline-danger {
                                    opacity: 1;
                                }
                            </style>

                            <div id="notes-list-view">

                                <div id="notes-container" class="list-group"></div>
                                <div class="d-flex justify-content-center gap-2 align-items-center mb-3 mt-3">
                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="clearAllNotes()">
                                        Clear Notes
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="createNewNote()">
                                        Create New Note
                                    </button>
                                </div>
                            </div>

                            <div id="note-edit-view" style="display: none;">
                                <div class="d-flex justify-content-between align-items-center mb-4">

                                    <button type="button" class="btn btn-outline-success btn-sm" onclick="showNotesList()">
                                        Back
                                    </button>

                                    <div class="btn-group btn-group-xs">
                                        <button type="button" class="btn btn-outline-secondary btn-xs formatting-btn" data-format="bold" onclick="formatText('bold')" title="Bold (Ctrl+B)">
                                            <i class="fal fa-bold"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-xs formatting-btn" data-format="italic" onclick="formatText('italic')" title="Italic (Ctrl+I)">
                                            <i class="fal fa-italic"></i>
                                        </button>
                                        <button type="button" class="btn btn-outline-secondary btn-xs formatting-btn" data-format="underline" onclick="formatText('underline')" title="Underline (Ctrl+U)">
                                            <i class="fal fa-underline"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="editor-container mb-3">
                                    <div id="note-content" class="info-container mb-3 border-faded p-3 rounded text-break" contenteditable="true" placeholder="Start typing your note..."></div>
                                    <div class="fs-nano text-muted"> <i class="fal fa-check text-success"></i> Auto save every 5 seconds </div>
                                </div>
                            </div>

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

            </div>

            <?php include('partials/app-footer.php'); ?>

        </main>

        <?php include('partials/app-drawer.php'); ?>

        <?php include('partials/app-settings.php'); ?>

    </div>

    <?php include('partials/app-scripts.php'); ?>

    <script src="/public/scripts/optional/smartnotes.js"></script>

    <script src="/public/scripts/pages/usercontact.js"></script>

</body>

</html>