@extends('tenant.layouts.customer')

{{-- Tilte Section --}}
@section('title', 'Tickets Management')

{{-- Style Section --}}
@section('style')

    <style>
        .w-13 {
            width: 13% !important;
        }

        .w-5 {
            width: 4% !important;
        }

        .center {
            text-align: center;
        }

        .p-10 {
            padding: 10px;
        }

        .b-white {
            background: white;
        }

        .b-radius-10 {
            border-radius: 10px;
        }

        th {
            background: #fbfbfb !important;
        }



        .w-95 {
            width: 95% !important;
        }

        .mt-10 {
            margin-top: 10px;
        }

        .w-px-200 {
            width: 170px !important;
        }

        .mt-35 {
            margin-top: 35px;
        }

        .mr-10 {
            margin-right: 10px;
        }



        .dot {
            height: 8px;
            width: 8px;
            background-color: #ecaf53;
            border-radius: 50%;
            display: inline-block;
        }


        .t-id {
            padding: 5px;
            width: 87px !important;
            border-radius: 19px;
            background: #e0f4e9;
            display: inline-block;
            color: #6c6c6c;
        }

        .hide {
            display: none !important;
        }

        .myDIV:hover+.hide {
            display: block !important;

        }


        .mod_cos1 {
            position: fixed;
            background: white;
            width: 12%;
            display: flex;
        }

        .mod_cos {
            position: fixed;
            background: white;

            display: flex;
        }

        .p-t-l {
            padding: 12px;
        }

        hr {
            margin: 0rem 0 !important;

        }

        .bord {
            border: solid 1px;
            border-color: #b9cac1;
        }

        .md-header {
            background: linear-gradient(110deg, #00a34e -1%, #00a34e 67%, rgba(195,223,0,1) 104%);
            color: white;
        }

        .txt-ar {
            width: 100%;
            height: 111px;
            background: #fbfbfb;
            border-color: #e3e3e3;
        }



        .in-dis {
            width: 87%;
            height: 35px;
            background-color: #fbfbfb;
            border-color: #e1e1e1 !important;
            color: #00a34e;
        }

        .filter-pading {
            padding: 0px;
            padding-left: 10px;
            /*margin-top: 7px;*/
            margin-bottom: 7px;
        }

        .form-check-input:checked {
            background-color: #00a34e;
            border-color: #00a34e;
        }

        .form-check-input:checked+label {

            color: #00a34e;
        }

        .hr_color {
            color: #04a22a;
            border: solid 1.5px;
        }

        .icons {
            /*position: relative;*/
            background-image: linear-gradient(to bottom, #02a34e, #abc959);
            color: white;
            border-radius: 25%;
            opacity: .4;
            padding: 4px;
            display: inline-block;
        }

        .icons-2 {
            background: white;
            color: #818181;
            border: solid 1px #dadedc;
            border-radius: 25%;
            padding: 3px;
            display: inline-block;
        }

        .icons.active {
            opacity: 1;
        }

        .list-filter {
            overflow-x: auto;
            white-space: nowrap;
        }

        .list-filter::-webkit-scrollbar {
            display: none;
        }

        .list-filter-icons {
            padding-top: 10px;
            height: 47px;
        }

        .counter {
            right: -25px;
            font-size: 7px;
        }

        .reply .col-auto .card {
            background-image: linear-gradient(to right, #02a34e, #abc959);
            color: white;
        }

        .reply .col-auto {
            font-size: 13px;
        }

        .col-auto {
            font-size: 13px;
        }

        .sendMessage {
            background-image: linear-gradient(to bottom, #02a34e, #abc959);
            color: white;
            border-radius: 50%;
            border: #14e714;
        }

        .chat-active {
            background-image: linear-gradient(to right, #02a34e, #abc959);
            color: white !important;
            border-radius: 13px;

        }

        .chat-active-text {
            color: white !important;
        }

        .accordion-item {
            border: 0;
            /*border-bottom: 1px solid #cccccc;*/
        }

        .history-button {
            background: white;
            color: black;
            margin: auto;
            width: auto;
            border-radius: 40px;
            font-size: 10px;
        }

        .accordion-header {
            background: white;
            text-align-last: center;
            margin-top: 2px;


        }

        .accordion-item:first-of-type .accordion-button {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .history-button:focus {
            z-index: 3;
            border-color: green !important;
            font-weight: bold;
            outline: 0;
            box-shadow: white !important;
        }

        .history-button:not(.collapsed) {
            color: green;
            background-color: white;
            border-color: white;
            box-shadow: white;
        }

        .form-label {
            font-size: 12px;
        }

        .form-select {
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .form-input {
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .w-5 {
            width: 4% !important;
        }

        .b-white {
            background: white;
        }

        .b-radius-10 {
            border-radius: 10px;
        }

        .center {
            text-align: center;
        }

        .p-10 {
            padding: 10px;
        }

        .dot {
            height: 8px;
            width: 8px;
            background-color: #ecaf53;
            border-radius: 50%;
            display: inline-block;
        }

        .search-bar {
            height: 40px;
            display: flex;
            width: 70%;
            max-width: 400px;
            padding-left: 16px;
            border-radius: 4px;
        }

        .search-bar input {
            width: 100%;
            height: 100%;
            border: none;
            background-color: var(--search-bg);
            border-radius: 9px;
            font-family: var(--body-font);
            font-size: 15px;
            font-weight: 500;
            padding: 0 20px 0 40px;
            box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02);
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
            background-size: 14px;
            background-repeat: no-repeat;
            background-position: 16px 48%;
            color: var(--theme-color);
        }

        .search-bar input::-moz-placeholder {
            font-family: var(--body-font);
            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .search-bar input:-ms-input-placeholder {
            font-family: var(--body-font);
            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .search-bar input::placeholder {
            font-family: var(--body-font);
            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .icons {
            /*position: relative;*/
            background-image: linear-gradient(to bottom, #02a34e, #abc959);
            color: white;
            border-radius: 25%;
            opacity: .4;
            padding: 4px;
            display: inline-block;
        }

        .icons-2 {
            background: white;
            color: #818181;
            border: solid 1px black;
            border-radius: 25%;
            padding: 3px;
            display: inline-block;
        }

        .icons.active {
            opacity: 1;
        }

        .list-filter {
            overflow-x: auto;
            white-space: nowrap;
        }

        .list-filter::-webkit-scrollbar {
            display: none;
        }

        .list-filter-icons {
            padding-top: 10px;
            height: 47px;
        }

        .counter {
            right: -25px;
            font-size: 7px;
        }

        .reply .col-auto .card {
            background-image: linear-gradient(to right, #02a34e, #abc959);
            color: white;
        }

        .reply .col-auto {
            font-size: 13px;
        }

        .col-auto {
            font-size: 13px;
        }

        .sendMessage {
            background-image: linear-gradient(to bottom, #02a34e, #abc959);
            color: white;
            border-radius: 50%;
            border: #14e714;
        }

        .chat-active {
            background-image: linear-gradient(to right, #02a34e, #abc959);
            color: white !important;
            border-radius: 13px;

        }

        .chat-active-text {
            color: white !important;
        }

        .accordion-item {
            border: 0;
            /*border-bottom: 1px solid #cccccc;*/
        }

        .history-button {
            background: white;
            color: black;
            margin: auto;
            width: auto;
            border-radius: 40px;
            font-size: 10px;
        }

        .accordion-header {
            background: white;
            text-align-last: center;
            margin-top: 2px;


        }

        .accordion-item:first-of-type .accordion-button {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .history-button:focus {
            z-index: 3;
            border-color: green !important;
            font-weight: bold;
            outline: 0;
            box-shadow: white !important;
        }

        .history-button:not(.collapsed) {
            color: green;
            background-color: white;
            border-color: white;
            box-shadow: white;
        }

        .form-label {
            font-size: 12px;
        }

        .form-select {
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .form-input {
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .w-13 {
            width: 13% !important;
        }

        .w-5 {
            width: 4% !important;
        }

        .center {
            text-align: center;
        }

        .p-10 {
            padding: 10px;
        }

        .b-white {
            background: white;
        }

        .b-radius-10 {
            border-radius: 10px;
        }

        th {
            background: #fbfbfb !important;
        }



        .w-95 {
            width: 95% !important;
        }

        .mt-10 {
            margin-top: 10px;
        }

        .w-px-200 {
            width: 170px !important;
        }

        .mt-35 {
            margin-top: 35px;
        }

        .mt-20 {
            margin-top: 20px;
        }

        .mr-10 {
            margin-right: 10px;
        }



        .dot {
            height: 8px;
            width: 8px;
            background-color: #ecaf53;
            border-radius: 50%;
            display: inline-block;
        }

        .dot-max {
            height: 12px;
            width: 12px;
            background-color: #ecaf53;
            border-radius: 50%;
            display: inline-block;
        }


        .t-id {
            padding: 5px;
            width: 87px !important;
            border-radius: 19px;
            background: #e0f4e9;
            display: inline-block;
            color: #6c6c6c;
        }

        .hide {
            display: none !important;
        }

        .myDIV:hover+.hide {
            display: block !important;

        }


        .mod_cos1 {
            position: fixed;
            background: white;
            width: 12%;
            display: flex;
        }

        .mod_cos {
            position: fixed;
            background: white;

            display: flex;
        }

        .p-t-l {
            padding: 12px;
        }

        hr {
            margin: 0rem 0 !important;

        }

        .bord {
            border: solid 1px;
            border-color: #b9cac1;
        }

        .date-t {
            /* background: #282828;
                    color: white;
                    border-radius: 12px;
                    height: 47px;
                    padding-top: 12px;
                    width: 131px; */
            background: #282828;
            font-size: small;
            color: white;
            border-radius: 12px;
            height: 35px;
            padding-top: 7px;
            width: 114px;
        }

        .time-dots {
            padding: 0;
            margin: 0;
            width: fit-content;
        }

        .soucand-t {
            /*  border: solid 2px;
                    border-radius: 12px;
                    height: 49px;
                    padding-top: 11px;
                    width: 54px !important;
                    border-color: #00a34e; */

            border: solid 2px;
            border-radius: 12px;
            height: 35px;
            padding-top: 11px;
            width: 30px !important;
            border-color: #00a34e;
            font-size: small;
        }

        .time-container {
            font-size: small;
            display: inline-block;
        }

        .counter-container>span.time-element {
            border: 5px solid #00a34e;
            border-radius: 20%;
            color: #fff;
            background: #00a34e;
            margin: 5px;
            display: inline-block;
            /*     height: 50%;
            width: 15%; */
            text-align: center;

        }

        .counter-container>span.time-element-hours {
            border: 2px solid #00a34e;
            padding: 3px;
            border-radius: 20%;
            color: #000;
            background: #fff;
            margin: 5px;
            display: inline-block;
            /*     height: 50%;
            width: 15%; */
            text-align: center;

        }

        .counter-container>span.date-element {
            border: 5px solid #000;
            border-radius: 9%;
            color: #fff;
            background: #000;
            /*  width: 5%; */
            display: inline-block;
            /*     height: 50%;
            width: 15%;
            text-align: center; */
        }

        .time-seperator {
            font-size: x-large;
            font-weight: 500;
            color: #959595;
        }

        .m-h-t {
            border: solid 2px;
            border-radius: 12px;
            height: 30px;
            padding-top: 0;
            width: 30px !important;
            border-color: #d6e0db;
            background: #00a34e;
            color: white;
        }

        .ticket-title-container {
            align-self: center;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
        }

        .sp-cot-t {
            font-size: 30px;
            color: #959595;
        }

        .w-27-px {
            width: 27px !important;
        }

        .search-bar {
            height: 40px;
            display: flex;
            width: 70%;
            max-width: 400px;
            padding-left: 16px;
            border-radius: 4px;
        }

        .search-bar input {
            width: 100%;
            height: 100%;
            border: none;
            background-color: var(--search-bg);
            border-radius: 9px;
            font-family: var(--body-font);
            font-size: 15px;
            font-weight: 500;
            padding: 0 20px 0 40px;
            box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02);
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
            background-size: 14px;
            background-repeat: no-repeat;
            background-position: 16px 48%;
            color: var(--theme-color);
        }

        .search-bar input::-moz-placeholder {
            font-family: var(--body-font);
            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .search-bar input:-ms-input-placeholder {
            font-family: var(--body-font);
            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .search-bar input::placeholder {
            font-family: var(--body-font);
            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .box {
            position: relative;
            top: 20px;
            border-left: 1px solid #d6d6d6;
            /* height: 100px; */
            text-align: left;
        }

        .top {
            top: -11px;
        }

        .bottom {
            bottom: -9px;
        }

        .font-w {
            font-size: 20px;
            color: #6c6c6c;
        }

        .up-dr {
            float: right;
            border: solid 1px;
            border-radius: 8px;
            border-color: #6c6c6c;
        }



        .l-dis {
            margin-bottom: 8px;
            color: #8b9890;
        }

        .txt-ar {
            width: 100%;
            height: 111px;
            background: #fbfbfb;
            border-color: #e3e3e3;
        }

        .box-sta {
            border: solid 2px;
            border-radius: 8px;
            padding: 4px;
            border-color: #3fb979;
            font-size: 10px;
            color: #818f87;
        }

        .box-sta-filter {
            border: solid 2px;
            border-radius: 16px;
            padding: 4px;
            border-color: #d5d5d5;
            font-size: 10px;
            color: #818f87;
        }

        .box-sta-filter:visited {
            display: none;
        }

        .box-icon {
            border: solid 1px;
            border-radius: 17px;
            padding: 4px;
            border-color: #4f5451;
            font-size: 10px;
            color: #4f5451;
        }

        .reopen-bor {
            border: solid 2px;
            border-radius: 14px;
            padding: 4px;
            border-color: #e4e4e4;
            font-size: 10px;
            color: #53beec;
        }

        .redirect-bor {
            border: solid 2px;
            border-radius: 14px;
            padding: 4px;
            border-color: #e4e4e4;
            font-size: 10px;
            color: #eeb969;
        }

        .pd-r-l-b {
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 20px;
        }

        .icons {
            /*position: relative;*/
            background-image: linear-gradient(to bottom, #02a34e, #abc959);
            color: white;
            border-radius: 25%;
            opacity: .4;
            padding: 4px;
            display: inline-block;
        }

        .icons-2 {
            background: white;
            color: #818181;
            border: solid 1px #dadedc;
            border-radius: 25%;
            padding: 5px;
            display: inline-block;
        }

        .icons.active {
            opacity: 1;
        }

        .list-filter {
            overflow-x: auto;
            white-space: nowrap;
        }

        .list-filter::-webkit-scrollbar {
            display: none;
        }

        .list-filter-icons {
            padding-top: 10px;
            height: 47px;
        }

        .counter {
            right: -25px;
            font-size: 7px;
        }

        .reply .col-auto .card {
            background-image: linear-gradient(to right, #02a34e, #abc959);
            color: white;
        }

        .reply .col-auto {
            font-size: 13px;
        }

        .col-auto {
            font-size: 13px;
        }

        .sendMessage {
            background-image: linear-gradient(to bottom, #02a34e, #abc959);
            color: white;
            border-radius: 50%;
            border: #14e714;
        }

        .chat-active {
            background-image: linear-gradient(to right, #02a34e, #abc959);
            color: white !important;
            border-radius: 13px;

        }

        .chat-active-text {
            color: white !important;
        }

        .accordion-item {
            border: 0;
            /*border-bottom: 1px solid #cccccc;*/
        }

        .history-button {
            background: white;
            color: black;
            margin: auto;
            width: auto;
            border-radius: 40px;
            font-size: 10px;
        }

        .accordion-header {
            background: white;
            text-align-last: center;
            margin-top: 2px;


        }

        .accordion-item:first-of-type .accordion-button {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

        .history-button:focus {
            z-index: 3;
            border-color: green !important;
            font-weight: bold;
            outline: 0;
            box-shadow: white !important;
        }

        .history-button:not(.collapsed) {
            color: green;
            background-color: white;
            border-color: white;
            box-shadow: white;
        }

        .form-label {
            font-size: 12px;
        }

        .form-select {
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .form-input {
            padding: 7px 5px;
            font-size: 10px;
            border: none;
            color: black;
        }

        .w-5 {
            width: 4% !important;
        }

        .b-white {
            background: white;
        }

        .b-radius-10 {
            border-radius: 10px;
        }

        .center {
            text-align: center;
        }

        .p-10 {
            padding: 10px;
        }

        .dot {
            height: 8px;
            width: 8px;
            background-color: #ecaf53;
            border-radius: 50%;
            display: inline-block;
        }

        .search-bar {
            height: 40px;
            display: flex;
            width: 70%;
            max-width: 400px;
            padding-left: 16px;
            border-radius: 4px;
        }

        .search-bar input {
            width: 100%;
            height: 100%;
            border: none;
            background-color: var(--search-bg);
            border-radius: 9px;
            font-family: var(--body-font);
            font-size: 15px;
            font-weight: 500;
            padding: 0 20px 0 40px;
            box-shadow: 0 0 0 2px rgba(134, 140, 160, 0.02);
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23717790c7'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e");
            background-size: 14px;
            background-repeat: no-repeat;
            background-position: 16px 48%;
            color: var(--theme-color);
        }

        .search-bar input::-moz-placeholder {
            font-family: var(--body-font);
            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .search-bar input:-ms-input-placeholder {
            font-family: var(--body-font);
            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .search-bar input::placeholder {
            font-family: var(--body-font);
            color: rgb(196, 196, 196);
            font-size: 15px;
            font-weight: 500;
        }

        .md-header {
            background: background: rgb(5, 177, 48);
            background: linear-gradient(90deg, rgba(5, 177, 48, 1) 0%, rgba(3, 153, 39, 1) 57%, rgba(195, 223, 0, 1) 100%);
            color: white;
        }

        .txt-ar {
            width: 100%;
            height: 111px;
            background: #fbfbfb;
            border-color: #e3e3e3;
        }

        .l-dis {
            margin-bottom: 8px;
            color: #8b9890;
        }

        .in-dis {
            width: 87%;
            height: 35px;
            background-color: #fbfbfb;
            border-color: #e1e1e1 !important;
            color: #00a34e;
        }

        .form-check-input:checked {
            background-color: #00a34e;
            border-color: #00a34e;
        }

        .form-check-input:checked+label {

            color: #00a34e;
        }

        .hr_color {
            color: #04a22a;
            border: solid 1.5px;
        }

        .bor-rad {
            border-top-left-radius: 19px;
            border-top-right-radius: 19px;
        }

        .modal-button {
            position: relative;
            z-index: 2;
            /* Higher z-index value to bring the button to the front */
        }

        .modal {
            position: absolute;
            top: 0;
            left: 0;

            /* background-color: rgba(0, 0, 0, 0.5); */
            z-index: 1;
            /* Lower z-index value to push the modal behind the button */
            display: none;
        }

        .modal-content {
            position: absolute;
            top: 68%;
            left: 65%;
            transform: translate(-50%, -50%);
            background-color: #fff0;
            padding: 20px;
            border: none;

        }

        .modal-button-search {
            position: relative;
            /* Higher z-index value to bring the button to the front */
        }

        .modal-search {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;

            /* background-color: rgba(0, 0, 0, 0.5); */
            z-index: 1 !important;
            /* Lower z-index value to push the modal behind the button */
            display: none;
        }

        .modal-content-search {
            position: absolute !important;
            top: 31% !important;
            left: 72% !important;
            transform: translate(-50%, -50%) !important;
            background-color: #fff !important;
            /* padding: 20px !important; */
            border: none !important;

        }

        :focus-visible {
            outline: none;
        }


        .box-sta-filter:active {
            border-color: #14e714
        }

        .table-body-color {
            color: #6b6b6b;
        }

        .table-header-color {
            color: #929e98;
            font-weight: 400;
        }

        .filters-block {
            display: inline-flex;
            width: 36%;
            justify-content: space-around;
            float: right;
            position: absolute;
            right: 60px;
        }

        .filters-block-list {
            display: inline-flex;
            width: 54%;
            justify-content: flex-end;
            grid-gap: 4%;
        }

        .table-body-style {
            color: #6c6c6c;
            font-size: small;
        }
    </style>
    <style>
        .txt_cen {
            /* padding-left: 30px; */
            text-align: left !important;
            /* width: 150px !important; */
        }
        .filter-option-label{
            width: 100%;
        }
    </style>
@endsection

{{-- Content Section --}}
@section('content')
    @php
        $customerData = \App\Models\Tenant\CustomerPortalConfiguration::first();
    @endphp
    <div class="container-fluid px-3">
        <div class="row mb-1">
            <div class="col-sm-12">
                <div class="card shadow py-2 rounded border border-0" style=" background: #fdfdfd;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-8 col-md-12 col-12 m-auto mt-1" >
                                <h5 class="card-title mb-3">All Tickets <span style=" font-size: 10px; color: #b9cac1; "> {{ $counterTicket }}Tickets</span></h5>
                                <p class="card-text text-secondary">Find all tickets on this page and its respective details.</p>
                            </div>
                            <div class="col-lg-4 col-md-12 col-12 m-auto mt-1">
{{--                                <a href="{{ route('customer.tickets.create') }}" class="form-control btn" style="width: fit-content; float: right; background: {{$customerData->primary}}; color: {{$customerData->text_color}}">Create Ticket</a>--}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <livewire:tenant.customer.tickets.index />
    </div>
@endsection


{{-- Script Section --}}
@section('script')
    <script type="module">
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
        document.addEventListener('livewire:load', function () {
            Livewire.on('reload-page', function () {
                location.reload();
            });
        });

        var myButton = $('#email');
        var myButtonbd = $('.body');
        var filter_button = $('#filter_button');
        var filter_x = $('#x');
        var search_button = $('#search_button');
        var filter = $('#filter');
        var search = $('#search');
        var downmod = $('#tl')

        $(document).ready(function() {
            myButton.click(function() {
            downmod.fadeToggle(10);
            });
            myButtonbd.click(function() {
            downmod.hide();
            });
           });
        $(document).ready(function() {
            filter_button.click(function() {
                filter.fadeToggle(10);
                search.hide();

            });
           });
        $(document).ready(function() {
            search_button.click(function() {
                search.fadeToggle(10);
                filter.hide();

            });
           });
        $(document).ready(function() {
            filter_x.click(function() {
                filter.fadeToggle(10);
            });


           });
        $(document).ready(function() {
            var myButton_up = $('#up_img');
            var myButton_2 = $('#down_img');
            var downmod = $('#down')
            var upmod = $('#up')

            myButton_up.click(function() {
                upmod.fadeToggle(10);
                downmod.show();
            });
            myButton_2.click(function() {
                downmod.fadeToggle(10);
                upmod.show();
            });
          });
        $('.filter-input').click((event) => {

            console.log($(event.target).parent().css({ "border-color": "#39b373"}));
        })

    </script>
    <script>
        function toggleContent(element) {

            if ($('#ticket-comments').css('display') == 'block') {
                $('#ticket-comments').css('display', 'none');

                element.src = "https://gen01.extensyaidesk-sa.com/tenancy/assets/img/down-arrow2.png";
            } else {
                $('#ticket-comments').css('display', 'block');
                element.src = "https://gen01.extensyaidesk-sa.com/tenancy/assets/img/up-arrow2.png";


        }
    }
    </script>
@endsection