<script>
import Layout from "@/layout/main.vue"
import pageheader from "@/components/page-header.vue"
import { LockIcon, StarIcon, Trash2Icon, EditIcon } from "@zhuowenli/vue-feather-icons";

export default {
    name: "Ticket Details",
    components: {
        Layout, pageheader, LockIcon, StarIcon, Trash2Icon, EditIcon
    },
}
</script>

<template>
    <Layout>
        <pageheader title="Ticket Details" pageTitle="Helpdesk" />
        <!-- [ Main Content ] start -->
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5>
                            <LockIcon class="icon-svg-primary wid-20"></LockIcon><span class="p-l-5">Private Ticket
                                #1831786</span>
                        </h5>
                    </div>
                    <div class="card-body border-bottom py-2">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h4 class="d-inline-block mb-0">Theme customization issue</h4>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <div class="btn-star">
                                    <a href="#!" class="btn btn-light-success btn-sm">Mark as unread</a>
                                    <a href="#!">
                                        <StarIcon class="icon-svg-warning wid-20"></StarIcon>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="border-bottom card-body py-2">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <button type="button" class="btn btn-sm my-2 btn-light-success"><i class="me-2 feather icon-message-square"></i>Post a reply</button>
                                <button type="button" class="btn btn-sm my-2 btn-light-warning"><i class="me-2 feather icon-edit"></i>Post a Note</button>
                                <button type="button" class="btn btn-sm my-2 btn-light-danger"><i class="me-2 feather icon-user-check"></i>Customer Notes</button>
                            </div>
                        </div>
                    </div>
                    <div class="border-bottom card-body">
                        <div class="row">
                            <div class="col-sm-auto mb-3 mb-sm-0">
                                <div class="d-sm-inline-block d-flex align-items-center">
                                    <img class="wid-60 img-radius mb-2" src="@/assets/images/user/avatar-5.jpg" alt="Generic placeholder image ">
                                    <div class="ms-3 ms-sm-0  text-sm-center">
                                        <p><i class="material-icons-two-tone f-18 text-primary">thumb_up</i> 4</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="row">
                                    <div class="col">
                                        <div class="">
                                            <h4 class="d-inline-block">You</h4>
                                            <span class="badge bg-light-secondary">replied</span>
                                            <p class="text-muted">1 day ago on Wednesday at 8:18am</p>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-inline-block f-20 me-1">
                                                <a href="#" data-bs-toggle="tooltip" title="Edit">
                                                    <EditIcon class="icon-svg-success wid-20"></EditIcon>
                                                </a>
                                            </li>
                                            <li class="d-inline-block f-20">
                                                <a href="#" data-bs-toggle="tooltip" title="Delete">
                                                    <Trash2Icon class="icon-svg-danger wid-20"></Trash2Icon>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="">
                                    <p><b>hello john doe,</b></p>
                                    <p>you need to create <strong>"toolbar-options" div only once</strong> in a page in your code, this
                                        div fill found
                                        <strong>every "td"</strong> tag in your page, just remove those things.
                                    </p>
                                    <p>and also, in option button add <strong>"p-0" class in "I" tag</strong> to</p>
                                    <p>Thanks...</p>
                                </div>
                                <pre class=" language-markup">
<code class="language-markup">
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>pre</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>code</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>language-css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        p {
            color: #1abc9c
        }
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>code</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>pre</span><span class="token punctuation">&gt;</span></span>
</code>
                        </pre>
                            </div>
                        </div>
                    </div>
                    <div class="border-bottom card-body">
                        <div class="row">
                            <div class="col-sm-auto mb-3 mb-sm-0">
                                <div class="d-sm-inline-block d-flex align-items-center">
                                    <img class="wid-60 img-radius mb-2" src="@/assets/images/user/avatar-4.jpg" alt="Generic placeholder image ">
                                    <div class="ms-3 ms-sm-0  text-sm-center">
                                        <p><span class="badge bg-light-danger">1</span> Ticket</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="row">
                                    <div class="col">
                                        <div class="">
                                            <h4 class="d-inline-block">User</h4>
                                            <span class="badge bg-light-secondary">replied</span>
                                            <p class="text-muted">1 day ago on Wednesday at 8:18am</p>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-inline-block f-20 me-1">
                                                <a href="#" data-bs-toggle="tooltip" title="Edit">
                                                    <EditIcon class="icon-svg-success wid-20"></EditIcon>
                                                </a>
                                            </li>
                                            <li class="d-inline-block f-20">
                                                <a href="#" data-bs-toggle="tooltip" title="Delete">
                                                    <Trash2Icon class="icon-svg-danger wid-20"></Trash2Icon>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="">
                                    <p><b>hello john doe,</b></p>
                                    <p>you need to create <strong>"toolbar-options" div only once</strong> in a page in your code, this
                                        div fill found
                                        <strong>every "td"</strong> tag in your page, just remove those things.
                                    </p>
                                    <p>and also</p>
                                    <p>in option button add <strong>"p-0" class in "I" tag</strong> to</p>
                                    <p>Thanks...</p>
                                </div>
                                <div class="row text-center mb-2">
                                    <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                        <img src="@/assets/images/light-box/sl1.jpg" class="img-fluid m-b-10" alt="">
                                    </div>
                                    <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                        <img src="@/assets/images/light-box/sl2.jpg" class="img-fluid m-b-10" alt="">
                                    </div>
                                    <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                        <img src="@/assets/images/light-box/sl5.jpg" class="img-fluid m-b-10" alt="">
                                    </div>
                                    <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                        <img src="@/assets/images/light-box/sl6.jpg" class="img-fluid m-b-10" alt="">
                                    </div>
                                    <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                        <img src="@/assets/images/light-box/sl1.jpg" class="img-fluid m-b-10" alt="">
                                    </div>
                                </div>
                                <button type="button" class="btn btn-light-danger btn-sm"><i data-feather="thumbs-up" class="me-1"></i> Like</button>
                            </div>
                        </div>
                    </div>
                    <div class="border-bottom card-body">
                        <div class="row">
                            <div class="col-sm-auto mb-3 mb-sm-0">
                                <div class="d-sm-inline-block d-flex align-items-center">
                                    <img class="wid-60 img-radius mb-2" src="@/assets/images/user/avatar-5.jpg" alt="Generic placeholder image ">
                                    <div class="ms-3 ms-sm-0  text-sm-center">
                                        <p><i class="material-icons-two-tone f-18 text-primary">thumb_up</i> 4</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col">
                                <div class="row">
                                    <div class="col">
                                        <div class="">
                                            <h4 class="d-inline-block">You</h4>
                                            <span class="badge bg-light-secondary">replied</span>
                                            <p class="text-muted">1 day ago on Wednesday at 8:18am</p>
                                        </div>
                                    </div>
                                    <div class="col-auto">
                                        <ul class="list-unstyled mb-0">
                                            <li class="d-inline-block f-20 me-1">
                                                <a href="#" data-bs-toggle="tooltip" title="Edit">
                                                    <EditIcon class="icon-svg-success wid-20"></EditIcon>
                                                </a>
                                            </li>
                                            <li class="d-inline-block f-20">
                                                <a href="#" data-bs-toggle="tooltip" title="Delete">
                                                    <Trash2Icon class="icon-svg-danger wid-20"></Trash2Icon>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="">
                                    <p><b>hello john doe,</b></p>
                                    <p>you need to create <strong>"toolbar-options" div only once</strong> in a page in your code, this
                                        div fill found
                                        <strong>every "td"</strong> tag in your page, just remove those things.
                                    </p>
                                    <p>and also, in option button add <strong>"p-0" class in "I" tag</strong> to</p>
                                    <p>Thanks...</p>
                                </div>
                                <pre>
<code class="language-markup">
&lt;pre&gt;
&lt;code class="language-css"&gt;
    p {
        color: #1abc9c
    }
&lt;/code&gt;
&lt;/pre&gt;
</code>
                            </pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5>Ticket Details</h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-success d-block text-center text-uppercase"><i class="feather icon-check-circle me-2"></i>Verified Purchase</div>
                        <div class="select-block">
                            <div class="mb-2">
                                <select class="form-control col-sm-12">
                                    <option>Open</option>
                                    <option>Close</option>
                                    <option>CLosed Forever</option>
                                </select>
                            </div>
                            <div class="mb-2">
                                <select class="form-control col-sm-12">
                                    <option value="avatar-5">Jack Pall</option>
                                    <option value="avatar-4">Liza Mac</option>
                                    <option value="avatar-3">Lina Hop</option>
                                    <option value="avatar-2">Sam Hunk</option>
                                    <option value="avatar-1">Jhon White</option>
                                </select>
                            </div>
                            <div class="mb-2">
                                <select class="form-control col-sm-12">
                                    <option value="prod-1">Able Admin</option>
                                    <option value="prod-2">Guru Dash</option>
                                    <option value="prod-3">Able pro</option>
                                    <option value="prod-4">Able Dash</option>
                                    <option value="prod-5">Dash Able</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <label class="mb-0 wid-100">Customer</label>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <p class="mb-0"><img src="@/assets/images/user/avatar-5.jpg" alt="" class="wid-20 rounded me-1 img-fluid"><a href="#" class="link-secondary">Jack Pall</a></p>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <label class="mb-0 wid-100">Contact</label>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <p class="mb-0"><i class="feather icon-mail me-1"></i><a href="#" class="link-secondary">mail@mail.com</a></p>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <label class="mb-0 wid-100">Category</label>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <p class="mb-0"><img src="@/assets/images/admin/p1.jpg" alt="" class="wid-20 rounded me-1 img-fluid"><a href="#" class="link-secondary">Alpha pro</a></p>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <label class="mb-0 wid-100">Assigned</label>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <p class="mb-0"><img src="@/assets/images/user/avatar-4.jpg" alt="" class="wid-20 rounded me-1 img-fluid"><a href="#" class="link-secondary">Lina Hop</a></p>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <label class="mb-0 wid-100">Created</label>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <p class="mb-0"><i class="feather icon-calendar me-1"></i><label class="mb-0">Date</label></p>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                    <label class="mb-0 wid-100">Response</label>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <p class="mb-0"><i class="feather icon-clock me-1"></i><label class="mb-0">Time</label></p>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item py-3">
                            <button type="button" class="btn btn-sm btn-light-warning me-2"><i class="me-2 feather icon-thumbs-up"></i>Make Private</button>
                            <button type="button" class="btn btn-sm btn-light-danger"><i class="me-2 feather icon-trash-2"></i>Delete</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </Layout>
</template>