<?php include 'header.php'; ?>
<?php include '_top-header.php'; ?>

<div class="page">
    <div class="container p-0">
        <div class="profile-layout">
            <div class="start">
                <?php include '_profile-layout-side-menu.php' ?>
            </div><!-- start -->

            <div class="end">

                <div class="card">

                    <div class="flex-between mb-3">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#"> Help center </a></li>
                            <li class="breadcrumb-item active"> Customer Support </li>
                        </ol>
                    </div>

                    <div class="custom-tabs-wrapper style2">

                        <div class="nav-tabs-wrapper">

                            <ul class="nav nav-tabs justify-content-start" role="tablist">

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="support-tab" data-toggle="tab" data-target="#support"> Support </button>
                                </li>

                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="history-tab" data-toggle="tab" data-target="#history"> History </button>
                                </li>

                            </ul>

                        </div>

                        <div class="tab-content">

                            <div class="tab-pane fade show active" id="support" role="tabpanel" aria-labelledby="support-tab">

                                <div class="pt-4">

                                    <div class="form-group">
                                        <label> Ticket Type </label>
                                        <select class="form-control">
                                            <option value="01" selected> 001 </option>
                                            <option value="02">002 </option>
                                            <option value="03"> 003 </option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label> Ticket Title </label>
                                        <input type="text" class="form-control" placeholder="Type your title here...">
                                    </div>

                                    <div class="form-group">
                                        <label> Ticket Description </label>
                                        <textarea class="form-control" id="" rows="3" placeholder="Type here How shall we help you..."></textarea>
                                    </div>

                                    <div class="text-right">
                                        <a href="#" class="btn btn-primary min-w-100 btn-sm"> Submit </a>
                                    </div>

                                </div>

                            </div>

                            <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">

                                <div class="pt-4">

                                    <div class="custom-tabs-wrapper style4">

                                        <div class="nav-tabs-wrapper">

                                            <ul class="nav nav-tabs justify-content-start" role="tablist">

                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link active" id="all-tab" data-toggle="tab" data-target="#all"> All </button>
                                                </li>


                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="opened-tab" data-toggle="tab" data-target="#opened"> Opened </button>
                                                </li>

                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="replied-tab" data-toggle="tab" data-target="#replied"> Replied </button>
                                                </li>

                                                <li class="nav-item" role="presentation">
                                                    <button class="nav-link" id="closed-tab" data-toggle="tab" data-target="#closed"> Closed </button>
                                                </li>

                                            </ul>

                                        </div>

                                        <div class="tab-content">

                                            <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">


                                                <div class="support-items-list">






                                                    <div class="support-item-card py-3">

                                                        <div class="row">

                                                            <div class="col-lg-9">

                                                                <div class="w-100 h-15px base-border-radius overflow-hidden mb-1">
                                                                    <div class="shimmer"></div>
                                                                </div>


                                                                <div class="w-100px h-15px base-border-radius overflow-hidden">
                                                                    <div class="shimmer"></div>
                                                                </div>

                                                            </div>

                                                            <div class="col-lg-3 text-right">

                                                                <div class="flex-end gap-2">
                                                                    <div class="w-100px h-40px base-border-radius overflow-hidden">
                                                                        <div class="shimmer"></div>
                                                                    </div>
                                                                </div>

                                                            </div>

                                                        </div>

                                                    </div>


                                                    <?php foreach (range(1, 10) as $i) { ?>

                                                        <div class="support-item-card py-3">

                                                            <div class="row">

                                                                <div class="col-lg-9">

                                                                    <a href="profile-customer-support-ticket.php" class="m-0 show-lines-1 w-auto"> issue for login </a>

                                                                    <p class="m-0 color-gray font-light show-lines-1"> Friday, 13 Aug, 2023 </p>

                                                                </div>

                                                                <div class="col-lg-3 text-right">

                                                                    <div class="flex-end gap-2">




                                                                        <?php
                                                                        if ($i == 1) {
                                                                            echo '
                                                                            <span class="rounded-pill w-25px h-25px bg-danger color-white flex-center"> 2 </span>
                                                                            <span class="badge badge-xs badge-replied"> Replied </span>
                                                                            ';
                                                                        } elseif ($i == 2) {
                                                                            echo '<span class="badge badge-xs badge-closed"> Closed </span>';
                                                                        } else {
                                                                            echo '<span class="badge badge-xs badge-opened"> Opened </span>';
                                                                        }
                                                                        ?>

                                                                    </div>

                                                                </div>

                                                            </div>

                                                        </div>

                                                    <?php } ?>

                                                </div>

                                            </div>

                                            <div class="tab-pane fade" id="opened" role="tabpanel" aria-labelledby="opened-tab">


                                                <div class="no-data w-100">
                                                    <img src="https://test.kashkom.com/web_assets/v3/img/no-data-found.png" class="no-data-image mb-2" alt="">
                                                    <p> No Tickets </p>
                                                </div>

                                            </div>

                                            <div class="tab-pane fade" id="replied" role="tabpanel" aria-labelledby="replied-tab">
                                                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                            </div>

                                            <div class="tab-pane fade" id="closed" role="tabpanel" aria-labelledby="closed-tab">
                                                <p> Lorem Ipsum is simply dummy text of </p>
                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div> <!-- end -->

        </div> <!-- profile-layout -->

    </div> <!-- container -->

</div> <!-- page -->

<?php include 'footer.php'; ?>