@extends('backend.template.layouts.template-base')
@section('title', 'Subscriber - Index')

@section('content')
    <section>
        {{-- top-setion  --}}
        <div class="page-head-title mb-3">
            <div class="d-flex align-items-center justify-content-between">
                <div class="d-inline-block">
                    <h2 class="text-title fw-semibold mb-0">Subscribers List
                    </h2>
                </div>

                <div class="d-flex align-items-center gap-3">
                    <a href="Javascript:void(0);" class="button-green2 d-flex flex-row gap-2 align-items-center px-3">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M3.33325 13.3367V14.1667C3.33325 14.8297 3.59664 15.4656 4.06549 15.9344C4.53433 16.4033 5.17021 16.6667 5.83325 16.6667H14.1666C14.8296 16.6667 15.4655 16.4033 15.9344 15.9344C16.4032 15.4656 16.6666 14.8297 16.6666 14.1667V13.3333M9.99992 12.9167V3.75M7.08325 6.66667L9.99992 3.75L12.9166 6.66667"
                                    stroke="#0AA437" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>


                        </span>
                        Export
                    </a>
                    <a href="{{ route('backend.template.subscriber.TodayDetail') }}"
                        class="button-green subscriber-btn d-flex flex-row gap-2 align-items-center px-3">
                        <span>
                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M4.76685 7.88281V10.5495" stroke="white" stroke-width="1.2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M8.93335 6.4375V12.0042" stroke="white" stroke-width="1.2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M13.1001 7.88281V10.5495" stroke="white" stroke-width="1.2" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path
                                    d="M6.43343 17.2682H11.4334C15.6001 17.2682 17.2668 15.6016 17.2668 11.4349V6.4349C17.2668 2.26823 15.6001 0.601562 11.4334 0.601562H6.43343C2.26676 0.601562 0.600098 2.26823 0.600098 6.4349V11.4349C0.600098 15.6016 2.26676 17.2682 6.43343 17.2682Z"
                                    stroke="white" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>


                        </span>
                        Today’s Production Report
                    </a>

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

        <div class="row g-3 mb-3">

            <!-- Card 1 -->
            <div class="col-lg-3 col-md-6">
                <div class="dashboard-card">
                    <div class="d-flex justify-content-between align-items-start">

                        <div>
                            <h6 class="dashboard-title">Total Subscribers</h6>

                            <div class="dashboard-growth success-text">
                                ↑ 8.2%
                                <span>Vs last month</span>
                            </div>
                        </div>

                        <h2 class="dashboard-count">123</h2>

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

            <!-- Card 2 -->
            <div class="col-lg-3 col-md-6">
                <div class="dashboard-card">
                    <div class="d-flex justify-content-between align-items-start">

                        <div>
                            <h6 class="dashboard-title">Paused Today</h6>

                            <div class="dashboard-growth danger-text">
                                ↑ 2.1%
                                <span>vs yesterday</span>
                            </div>
                        </div>

                        <h2 class="dashboard-count">14</h2>

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

            <!-- Card 3 -->
            <div class="col-lg-3 col-md-6">
                <div class="dashboard-card">
                    <div class="d-flex justify-content-between align-items-start">

                        <div>
                            <h6 class="dashboard-title">Active Orders</h6>

                            <div class="dashboard-growth success-text">
                                ↓ 2.4%
                                <span>vs yesterday</span>
                            </div>
                        </div>

                        <h2 class="dashboard-count">99</h2>

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

            <!-- Card 4 -->
            <div class="col-lg-3 col-md-6">
                <div class="dashboard-card">
                    <div class="d-flex justify-content-between align-items-start">

                        <div>
                            <h6 class="dashboard-title">Revenue</h6>

                            <div class="dashboard-growth danger-text">
                                ↓ 8.2%
                                <span>vs last month</span>
                            </div>
                        </div>

                        <h2 class="dashboard-count">₹86K</h2>

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

        </div>

        <div class="custom-warning-alert mt-2">

            <div class="d-flex align-items-center">

                <svg class="me-2" width="19" height="20" viewBox="0 0 19 20" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M16.59 3.85L10.65 0.42C9.67998 -0.14 8.47998 -0.14 7.49998 0.42L1.57 3.85C0.6 4.41 0 5.45 0 6.58V13.42C0 14.54 0.6 15.58 1.57 16.15L7.50998 19.58C8.47998 20.14 9.67998 20.14 10.66 19.58L16.6 16.15C17.57 15.59 18.17 14.55 18.17 13.42V6.58C18.16 5.45 17.56 4.42 16.59 3.85ZM8.32998 5.75C8.32998 5.34 8.66998 5 9.07998 5C9.48998 5 9.82998 5.34 9.82998 5.75V11C9.82998 11.41 9.48998 11.75 9.07998 11.75C8.66998 11.75 8.32998 11.41 8.32998 11V5.75ZM9.99998 14.63C9.94998 14.75 9.87998 14.86 9.78998 14.96C9.59998 15.15 9.34998 15.25 9.07998 15.25C8.94998 15.25 8.81998 15.22 8.69998 15.17C8.56998 15.12 8.46998 15.05 8.36998 14.96C8.27998 14.86 8.20998 14.75 8.14998 14.63C8.09998 14.51 8.07998 14.38 8.07998 14.25C8.07998 13.99 8.17998 13.73 8.36998 13.54C8.46998 13.45 8.56998 13.38 8.69998 13.33C9.06998 13.17 9.50998 13.26 9.78998 13.54C9.87998 13.64 9.94998 13.74 9.99998 13.87C10.05 13.99 10.08 14.12 10.08 14.25C10.08 14.38 10.05 14.51 9.99998 14.63Z"
                        fill="#EF7C00" />
                </svg>


                <p class="mb-0 warning1">
                    18 subscriptions paused for 12th May, 2026<span> - salad count adjusted.</span> <a
                        href="{{ route('backend.template.subscriber.ProductionDetail') }}">View production report</a>
                </p>
            </div>

        </div>
        <div class="p-3"></div>
        <!-- Nav tabs -->
        <ul class="nav nav-tabs nav-tabs-custom " role="tablist">
            <li class="nav-item" role="presentation">
                <a class="nav-link active" data-bs-toggle="tab" href="#Categories" role="tab" aria-selected="false"
                    tabindex="-1">
                    Subscriber 1
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" href="#Sections" role="tab" aria-selected="false"
                    tabindex="-1">
                    Subscriber 2
                </a>
            </li>
            <li class="nav-item" role="presentation">
                <a class="nav-link" data-bs-toggle="tab" href="#Category2" role="tab" aria-selected="false">

                    Subscriber 3

                </a>
            </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content card-tab-border text-muted">
            <div class="tab-pane show active" id="Categories" role="tabpanel">
                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-12 col-md-6 d-flex gap-3">
                            <div class="table-search-box w-100">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search2">
                                <input type="text" placeholder="Search by Subscriber ID or name"
                                    class="table-search-input">
                            </div>
                            <div>
                                <div class="table-header-drops">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Groups">All Status</option>
                                        <option value="Fruits">Active</option>
                                        <option value="Vegetable">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-3 d-flex justify-content-md-end gap-2 align-items-center">

                            <span class="table-sort-content">Show</span>

                            <div class="dropdown">
                                <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                    data-bs-toggle="dropdown">
                                    10
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">40</a></li>
                                </ul>
                            </div>

                            <span class="table-sort-content">entries</span>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">

                        <table class="table table-nowrap align-middle">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">

                                    <th class="p-3 table-head-content">Subscriber ID</th>
                                    <th class="p-3 table-head-content">Subscriber Details</th>
                                    <th class="p-3 table-head-content">Plan Start Date</th>
                                    <th class="p-3 table-head-content">Plan End Date</th>
                                    <th class="p-3 table-head-content">Plan Status</th>
                                    <th class="p-3 table-head-content">Action</th>

                                </tr>
                            </thead>
                            <tbody class="list form-check-all sortable-table">
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-expired-pill status-toggle" data-status="active">
                                            Expired
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-paused-pill status-toggle" data-status="active">
                                            Paused
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <br>
                    <div class="d-flex flex-row gap-3 align-items-center justify-content-end">
                        <span class="bottom-content-table">1-10 of 32 results</span>
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <div class="bottom-arrow-left-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="right-arrow">
                            </div>
                            <span class="bottom-content-num-table">1</span>
                            <div class="bottom-arrow-right-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="left-arrow">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane " id="Sections" role="tabpanel">
                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-12 col-md-6 d-flex gap-3">
                            <div class="table-search-box w-100">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search2">
                                <input type="text" placeholder="Search by Subscriber ID or name"
                                    class="table-search-input">
                            </div>
                            <div>
                                <div class="table-header-drops">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Groups">All Status</option>
                                        <option value="Fruits">Active</option>
                                        <option value="Vegetable">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-3 d-flex justify-content-md-end gap-2 align-items-center">

                            <span class="table-sort-content">Show</span>

                            <div class="dropdown">
                                <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                    data-bs-toggle="dropdown">
                                    10
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">40</a></li>
                                </ul>
                            </div>

                            <span class="table-sort-content">entries</span>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">

                        <table class="table table-nowrap align-middle">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">

                                    <th class="p-3 table-head-content">Subscriber ID</th>
                                    <th class="p-3 table-head-content">Subscriber Details</th>
                                    <th class="p-3 table-head-content">Plan Start Date</th>
                                    <th class="p-3 table-head-content">Plan End Date</th>
                                    <th class="p-3 table-head-content">Plan Status</th>
                                    <th class="p-3 table-head-content">Action</th>

                                </tr>
                            </thead>
                            <tbody class="list form-check-all sortable-table">
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-expired-pill status-toggle" data-status="active">
                                            Expired
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-paused-pill status-toggle" data-status="active">
                                            Paused
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <br>
                    <div class="d-flex flex-row gap-3 align-items-center justify-content-end">
                        <span class="bottom-content-table">1-10 of 32 results</span>
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <div class="bottom-arrow-left-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="right-arrow">
                            </div>
                            <span class="bottom-content-num-table">1</span>
                            <div class="bottom-arrow-right-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="left-arrow">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane" id="Category2" role="tabpanel">

                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-12 col-md-6 d-flex gap-3">
                            <div class="table-search-box w-100">
                                <img class="table-search-icon" src="{{ asset('backend/template/svg-icon/search.svg') }}"
                                    alt="search2">
                                <input type="text" placeholder="Search by Subscriber ID or name"
                                    class="table-search-input">
                            </div>
                            <div>
                                <div class="table-header-drops">
                                    <select class="js-example-basic-single" name="state">
                                        <option value="All Groups">All Status</option>
                                        <option value="Fruits">Active</option>
                                        <option value="Vegetable">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-3 d-flex justify-content-md-end gap-2 align-items-center">

                            <span class="table-sort-content">Show</span>

                            <div class="dropdown">
                                <button class="button-color-lightBlue2 dropdown-toggle" type="button" id="entryBtn"
                                    data-bs-toggle="dropdown">
                                    10
                                </button>

                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item entry-value" href="#">10</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">20</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">30</a></li>
                                    <li><a class="dropdown-item entry-value" href="#">40</a></li>
                                </ul>
                            </div>

                            <span class="table-sort-content">entries</span>
                        </div>
                    </div>

                    <div class="table-responsive mt-3">

                        <table class="table table-nowrap align-middle">
                            <thead class="all-table-head">
                                <tr class="text-capitalize">

                                    <th class="p-3 table-head-content">Subscriber ID</th>
                                    <th class="p-3 table-head-content">Subscriber Details</th>
                                    <th class="p-3 table-head-content">Plan Start Date</th>
                                    <th class="p-3 table-head-content">Plan End Date</th>
                                    <th class="p-3 table-head-content">Plan Status</th>
                                    <th class="p-3 table-head-content">Action</th>

                                </tr>
                            </thead>
                            <tbody class="list form-check-all sortable-table">
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-expired-pill status-toggle" data-status="active">
                                            Expired
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-paused-pill status-toggle" data-status="active">
                                            Paused
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                                <tr class="" data-id="1">

                                    <td class="table-body-content p-3">SID001</td>
                                    <td class="table-body-content p-3">
                                        <div class="sr-customer">
                                            <span class="sr-name">Subscriber X</span>
                                            <span class="sr-phone"><svg width="14" height="14"
                                                    viewBox="0 0 14 14" fill="none"
                                                    xmlns="http://www.w3.org/2000/svg">
                                                    <g clip-path="url(#clip0_855_2251)">
                                                        <mask id="mask0_855_2251" style="mask-type:luminance"
                                                            maskUnits="userSpaceOnUse" x="0" y="0" width="14"
                                                            height="14">
                                                            <path d="M14 0H0V14H14V0Z" fill="white" />
                                                        </mask>
                                                        <g mask="url(#mask0_855_2251)">
                                                            <path
                                                                d="M6.44592 8.72214L5.36675 9.8013C5.13925 10.0288 4.77758 10.0288 4.54425 9.80713C4.48008 9.74297 4.41592 9.68464 4.35175 9.62047C3.75091 9.0138 3.20841 8.37797 2.72425 7.71297C2.24591 7.04797 1.86091 6.38297 1.58091 5.7238C1.30675 5.0588 1.16675 4.42297 1.16675 3.8163C1.16675 3.41964 1.23675 3.04047 1.37675 2.69047C1.51675 2.33464 1.73841 2.00797 2.04758 1.7163C2.42091 1.3488 2.82925 1.16797 3.26092 1.16797C3.42425 1.16797 3.58758 1.20297 3.73341 1.27297C3.88508 1.34297 4.01925 1.44797 4.12425 1.59964L5.47758 3.50714C5.58258 3.65297 5.65841 3.78714 5.71092 3.91547C5.76341 4.03797 5.79258 4.16047 5.79258 4.2713C5.79258 4.4113 5.75175 4.5513 5.67008 4.68547C5.59425 4.81964 5.48342 4.95964 5.34341 5.09964L4.90008 5.56047C4.83591 5.62464 4.80675 5.70047 4.80675 5.7938C4.80675 5.84047 4.81258 5.8813 4.82425 5.92797C4.84175 5.97464 4.85925 6.00963 4.87092 6.04463C4.97592 6.23713 5.15675 6.48797 5.41341 6.7913C5.67591 7.09464 5.95591 7.4038 6.25925 7.71297C6.31758 7.7713 6.38175 7.82964 6.44008 7.88797C6.67342 8.11547 6.67925 8.4888 6.44592 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8159 10.6939C12.8159 10.8572 12.7868 11.0264 12.7284 11.1897C12.7109 11.2364 12.6934 11.2831 12.6701 11.3297C12.5709 11.5397 12.4426 11.7381 12.2734 11.9247C11.9876 12.2397 11.6726 12.4672 11.3168 12.6131C11.3109 12.6131 11.3051 12.6189 11.2993 12.6189C10.9551 12.7589 10.5818 12.8347 10.1793 12.8347C9.58426 12.8347 8.94843 12.6947 8.2776 12.4089C7.60676 12.1231 6.93593 11.7381 6.27093 11.2539C6.04343 11.0847 5.81593 10.9156 5.6001 10.7347L7.5076 8.82724C7.67093 8.94974 7.81676 9.04307 7.93926 9.10724C7.96843 9.11891 8.00343 9.13641 8.04426 9.15391C8.09093 9.17141 8.1376 9.17724 8.1901 9.17724C8.28926 9.17724 8.3651 9.14224 8.42926 9.07807L8.8726 8.64057C9.01843 8.49474 9.15843 8.38391 9.2926 8.31391C9.42676 8.23224 9.56093 8.19141 9.70676 8.19141C9.8176 8.19141 9.93426 8.21474 10.0626 8.26724C10.1909 8.31974 10.3251 8.39557 10.4709 8.49474L12.4018 9.86557C12.5534 9.97057 12.6584 10.0931 12.7226 10.2389C12.7809 10.3847 12.8159 10.5306 12.8159 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_2251">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">00/00/0000</td>
                                    <td class="table-body-content p-3">
                                        {{-- To change the status status-green-pill(blue) / status-yellow-pill(red) --}}
                                        <span class="fw-bold status-green-pill status-toggle" data-status="active">
                                            Active
                                        </span>
                                    </td>
                                    <td class="table-body-content p-3">
                                        <a href="{{ route('backend.template.subscriber.SubscriberDetail') }}"><button
                                                class="btn custom-view-btn">
                                                View Details
                                            </button></a>
                                    </td>


                                </tr>
                            </tbody>
                        </table>

                    </div>
                    <br>
                    <div class="d-flex flex-row gap-3 align-items-center justify-content-end">
                        <span class="bottom-content-table">1-10 of 32 results</span>
                        <div class="d-flex flex-row gap-3 align-items-center">
                            <div class="bottom-arrow-left-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="right-arrow">
                            </div>
                            <span class="bottom-content-num-table">1</span>
                            <div class="bottom-arrow-right-img-table">
                                <img class="bottom-table-arrow"
                                    src="{{ asset('backend/template/svg-icon/left-arrow.svg') }}" alt="left-arrow">
                            </div>
                        </div>
                    </div>
                </div>
    </section>
@endsection