@extends('ui-common.layouts.master')
@section('title')
@lang('Subscriptions Report Add')
@endsection
@section('css')
<!-- DataTable 1.11.5 -->
<link href="{{ url('css/DataTables_cdn/datatables.bootstrap5.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/DataTables_cdn/datatables.responsive.min.css') }}" rel="stylesheet" />
<link href="{{ url('css/DataTables_cdn/datatables.buttons.min.css') }}" rel="stylesheet" />
<!-- select2@4.1.0 -->
<link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
<!-- font-awesome-6.7.2 -->
<link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />
<!-- SweetAlert2 CSS -->
<link href="{{ url('css/sweetalert-2@11.0.20/sweetalert2.min.css') }}" rel="stylesheet">
<link href="{{ url('css/equipment/equipment.index.css') }}" rel="stylesheet" />

@endsection
@section('content')
@component('tenants.components.breadcrumb')
@slot('li_1')
Subscriptions Report
@endslot
@slot('title')
Subscriptions Report
@endslot
@endcomponent

<div class="row">
    <div class="col-12 p-0">
        <div class="card">
            <div class="px-3 pt-3 flex-wrap">
                <div class="row">
                    <div class="col-auto my-auto d-flex gap-2 mb-3">
                        <div class="ctl-pag-tit-con mb-2">
                            Subscriptions Report
                        </div>
                        <!-- <button class="btn_delete_icon" data-toggle="tooltip" data-bs-placement="top" aria-label="Dete"
                            data-bs-original-title="Delete">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 11 11"
                                fill="none">
                                <g clip-path="url(#clip0_281_10181)">
                                    <path
                                        d="M10.3068 2.39336C10.3068 1.83498 9.8525 1.38071 9.29412 1.38071H7.54533V1.18519C7.54533 0.531695 7.01364 0 6.36008 0H4.6342C3.98065 0 3.44895 0.531695 3.44895 1.18521V1.38074H1.70012C1.14177 1.38074 0.6875 1.835 0.6875 2.39338C0.6875 2.83907 0.977066 3.21817 1.37786 3.35311V9.81477C1.37786 10.4683 1.90955 11 2.56309 11H8.43118C9.08471 11 9.61638 10.4683 9.61638 9.81477V3.35311C10.0172 3.21817 10.3068 2.83907 10.3068 2.39336ZM4.09348 1.18521C4.09348 0.88709 4.33606 0.644531 4.6342 0.644531H6.36008C6.65824 0.644531 6.9008 0.88709 6.9008 1.18521V1.38074H4.09348V1.18521ZM8.43118 10.3555H2.56311C2.26497 10.3555 2.02241 10.1129 2.02241 9.81477V3.40598H8.97187V9.81477C8.97185 10.1129 8.72932 10.3555 8.43118 10.3555ZM9.29412 2.76145H1.70012C1.49716 2.76145 1.33203 2.59632 1.33203 2.39336C1.33203 2.19038 1.49716 2.02525 1.70012 2.02525H9.29412C9.4971 2.02525 9.66225 2.19038 9.66225 2.39336C9.66225 2.59634 9.49712 2.76145 9.29412 2.76145Z"
                                        fill="#f04438"></path>
                                    <path
                                        d="M3.5957 4.14258C3.41773 4.14258 3.27344 4.28687 3.27344 4.46484V9.29741C3.27344 9.47539 3.41773 9.61968 3.5957 9.61968C3.77368 9.61968 3.91797 9.47539 3.91797 9.29741V4.46484C3.91797 4.28687 3.77368 4.14258 3.5957 4.14258Z"
                                        fill="#f04438"></path>
                                    <path
                                        d="M5.49414 4.14258C5.31616 4.14258 5.17188 4.28687 5.17188 4.46484V9.29741C5.17188 9.47539 5.31616 9.61968 5.49414 9.61968C5.67212 9.61968 5.81641 9.47539 5.81641 9.29741V4.46484C5.81641 4.28687 5.67212 4.14258 5.49414 4.14258Z"
                                        fill="#f04438"></path>
                                    <path
                                        d="M7.39258 4.14258C7.2146 4.14258 7.07031 4.28687 7.07031 4.46484V9.29741C7.07031 9.47539 7.2146 9.61968 7.39258 9.61968C7.57055 9.61968 7.71484 9.47539 7.71484 9.29741V4.46484C7.71484 4.28687 7.57055 4.14258 7.39258 4.14258Z"
                                        fill="#f04438"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_281_10181">
                                        <rect width="11" height="11" fill="white"></rect>
                                    </clipPath>
                                </defs>
                            </svg>
                        </button> -->
                    </div>
                    <div class="ms-lg-auto mb-3 w-225 filter_list">
                        <div class="ctl-input-field">
                            <span class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"
                                    fill="none">
                                    <g clip-path="url(#clip0_224_12492)">
                                        <path
                                            d="M6.60568 0C2.96341 0 0 2.96341 0 6.60568C0 10.2482 2.96341 13.2114 6.60568 13.2114C10.2482 13.2114 13.2114 10.2482 13.2114 6.60568C13.2114 2.96341 10.2482 0 6.60568 0ZM6.60568 11.9919C3.63577 11.9919 1.21951 9.57562 1.21951 6.60571C1.21951 3.6358 3.63577 1.21951 6.60568 1.21951C9.57559 1.21951 11.9919 3.63577 11.9919 6.60568C11.9919 9.57559 9.57559 11.9919 6.60568 11.9919Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M14.8215 13.9588L11.3255 10.4628C11.0873 10.2246 10.7015 10.2246 10.4633 10.4628C10.2251 10.7008 10.2251 11.087 10.4633 11.325L13.9593 14.821C14.0158 14.8777 14.083 14.9227 14.157 14.9533C14.231 14.984 14.3103 14.9997 14.3904 14.9996C14.4705 14.9997 14.5498 14.984 14.6237 14.9533C14.6977 14.9227 14.7649 14.8777 14.8215 14.821C15.0597 14.583 15.0597 14.1968 14.8215 13.9588Z"
                                            fill="#868C98"></path>
                                    </g>
                                    <defs>
                                        <clipPath id="clip0_224_12492">
                                            <rect width="15" height="15" fill="white"></rect>
                                        </clipPath>
                                    </defs>
                                </svg>
                            </span>
                            <input autocomplete="off" type="text" name="search" class="form-control"
                                placeholder="Search" aria-label="search" aria-describedby="addon-wrapping">
                        </div>
                    </div>
                    <div class="p-0 filter_list w-145">
                        <div class="form-group">
                            <div class="input-field">
                                <span class="icon list_icons">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"
                                        fill="none">
                                        <path
                                            d="M10.625 8.75C10.9702 8.75 11.25 8.47018 11.25 8.125C11.25 7.77982 10.9702 7.5 10.625 7.5C10.2798 7.5 10 7.77982 10 8.125C10 8.47018 10.2798 8.75 10.625 8.75Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M10.625 11.25C10.9702 11.25 11.25 10.9702 11.25 10.625C11.25 10.2798 10.9702 10 10.625 10C10.2798 10 10 10.2798 10 10.625C10 10.9702 10.2798 11.25 10.625 11.25Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M8.125 8.125C8.125 8.47018 7.84518 8.75 7.5 8.75C7.15482 8.75 6.875 8.47018 6.875 8.125C6.875 7.77982 7.15482 7.5 7.5 7.5C7.84518 7.5 8.125 7.77982 8.125 8.125Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M8.125 10.625C8.125 10.9702 7.84518 11.25 7.5 11.25C7.15482 11.25 6.875 10.9702 6.875 10.625C6.875 10.2798 7.15482 10 7.5 10C7.84518 10 8.125 10.2798 8.125 10.625Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M4.375 8.75C4.72018 8.75 5 8.47018 5 8.125C5 7.77982 4.72018 7.5 4.375 7.5C4.02982 7.5 3.75 7.77982 3.75 8.125C3.75 8.47018 4.02982 8.75 4.375 8.75Z"
                                            fill="#868C98"></path>
                                        <path
                                            d="M4.375 11.25C4.72018 11.25 5 10.9702 5 10.625C5 10.2798 4.72018 10 4.375 10C4.02982 10 3.75 10.2798 3.75 10.625C3.75 10.9702 4.02982 11.25 4.375 11.25Z"
                                            fill="#868C98"></path>
                                        <path fill-rule="evenodd" clip-rule="evenodd"
                                            d="M4.375 1.09375C4.63388 1.09375 4.84375 1.30362 4.84375 1.5625V2.0392C5.2575 2.03124 5.71333 2.03125 6.21466 2.03125H8.78526C9.2866 2.03125 9.7425 2.03124 10.1563 2.0392V1.5625C10.1563 1.30362 10.3661 1.09375 10.625 1.09375C10.8839 1.09375 11.0938 1.30362 11.0938 1.5625V2.07943C11.2562 2.09182 11.4101 2.10739 11.5556 2.12696C12.2884 2.22548 12.8815 2.43305 13.3492 2.90078C13.817 3.3685 14.0245 3.9616 14.123 4.69436C14.2188 5.40636 14.2188 6.31613 14.2188 7.46471V8.78526C14.2188 9.93384 14.2188 10.8436 14.123 11.5556C14.0245 12.2884 13.817 12.8815 13.3492 13.3492C12.8815 13.8169 12.2884 14.0245 11.5556 14.123C10.8436 14.2188 9.93387 14.2188 8.78529 14.2188H6.21474C5.06616 14.2188 4.15637 14.2188 3.44436 14.123C2.7116 14.0245 2.1185 13.8169 1.65078 13.3492C1.18305 12.8815 0.975477 12.2884 0.876959 11.5556C0.781233 10.8436 0.78124 9.93386 0.78125 8.78526V7.46474C0.78124 6.31614 0.781233 5.40637 0.876959 4.69436C0.975477 3.9616 1.18305 3.3685 1.65078 2.90078C2.1185 2.43305 2.7116 2.22548 3.44436 2.12696C3.58994 2.10739 3.74379 2.09182 3.90625 2.07943V1.5625C3.90625 1.30362 4.11612 1.09375 4.375 1.09375ZM3.56928 3.0561C2.94048 3.14064 2.5782 3.29918 2.31369 3.56369C2.04918 3.8282 1.89064 4.19047 1.8061 4.81928C1.79178 4.92577 1.77981 5.03788 1.7698 5.15625H13.2302C13.2202 5.03788 13.2082 4.92577 13.1939 4.81928C13.1094 4.19047 12.9508 3.8282 12.6863 3.56369C12.4218 3.29918 12.0595 3.14064 11.4307 3.0561C10.7884 2.96975 9.94176 2.96875 8.75 2.96875H6.25C5.05824 2.96875 4.21157 2.96975 3.56928 3.0561ZM1.71875 7.5C1.71875 6.96624 1.71895 6.50171 1.72693 6.09375H13.2731C13.2811 6.50171 13.2813 6.96624 13.2813 7.5V8.75C13.2813 9.94176 13.2803 10.7884 13.1939 11.4307C13.1094 12.0595 12.9508 12.4218 12.6863 12.6863C12.4218 12.9508 12.0595 13.1094 11.4307 13.1939C10.7884 13.2803 9.94176 13.2812 8.75 13.2812H6.25C5.05824 13.2812 4.21157 13.2803 3.56928 13.1939C2.94048 13.1094 2.5782 12.9508 2.31369 12.6863C2.04918 12.4218 1.89064 12.0595 1.8061 11.4307C1.71975 10.7884 1.71875 9.94176 1.71875 8.75V7.5Z"
                                            fill="#868C98"></path>
                                    </svg>
                                </span>
                                <input type="text" data-provider="flatpickr" data-date-format="m/d/Y"
                                    class="form-control flatpickr-input" id="date_range" name="date_range"
                                    placeholder="Date " value="">
                            </div>
                        </div>
                    </div>
                    <div class="dropdown dropdown_content w-135 filter_list me-2">
                        <button class="dropdown-toggle toggle_btn" type="button" id="dropdownMenuButton"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            <svg width="15" height="15" viewBox="0 0 15 15" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <g clip-path="url(#clip0_1336_18362)">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M3.28125 9.06253C3.28125 8.80365 3.49112 8.59378 3.75 8.59378H8.75C9.00888 8.59378 9.21875 8.80365 9.21875 9.06253C9.21875 9.32141 9.00888 9.53128 8.75 9.53128H3.75C3.49112 9.53128 3.28125 9.32141 3.28125 9.06253Z"
                                        fill="#868C98"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M3.28125 11.25C3.28125 10.9911 3.49112 10.7813 3.75 10.7813H7.1875C7.44638 10.7813 7.65625 10.9911 7.65625 11.25C7.65625 11.5089 7.44638 11.7188 7.1875 11.7188H3.75C3.49112 11.7188 3.28125 11.5089 3.28125 11.25Z"
                                        fill="#868C98"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M7.65625 1.77139C7.3685 1.72249 6.97623 1.71878 6.26862 1.71878C5.07069 1.71878 4.21922 1.71977 3.57366 1.80617C2.94123 1.89081 2.57783 2.04958 2.31369 2.31372C2.04918 2.57823 1.89064 2.94051 1.8061 3.56931C1.71975 4.2116 1.71875 5.05827 1.71875 6.25003V8.75003C1.71875 9.94179 1.71975 10.7885 1.8061 11.4308C1.89064 12.0596 2.04918 12.4218 2.31369 12.6863C2.5782 12.9508 2.94047 13.1094 3.56928 13.1939C4.21157 13.2803 5.05824 13.2813 6.25 13.2813H8.75C9.94176 13.2813 10.7884 13.2803 11.4307 13.1939C12.0595 13.1094 12.4218 12.9508 12.6863 12.6863C12.9508 12.4218 13.1094 12.0596 13.1939 11.4308C13.2803 10.7885 13.2812 9.94179 13.2812 8.75003V8.47684C13.2812 7.51684 13.2745 7.06174 13.1726 6.71878H11.2164C10.5084 6.7188 9.92984 6.71881 9.47305 6.6574C8.99558 6.5932 8.58162 6.45428 8.25119 6.12384C7.92076 5.79341 7.78183 5.37945 7.71764 4.90198C7.65622 4.44519 7.65623 3.86661 7.65625 3.15859V1.77139ZM8.59375 2.25594V3.12503C8.59375 3.87485 8.59475 4.39006 8.64678 4.77706C8.69699 5.15057 8.78689 5.33372 8.9141 5.46093C9.04131 5.58814 9.22446 5.67804 9.59797 5.72826C9.98497 5.78029 10.5002 5.78128 11.25 5.78128H12.5122C12.3269 5.60157 12.0895 5.38623 11.7812 5.10879L9.30701 2.88198C9.00365 2.60895 8.77787 2.40742 8.59375 2.25594ZM6.35966 0.781266C7.22503 0.781034 7.78412 0.780885 8.2987 0.978346C8.81327 1.17581 9.22698 1.54834 9.86705 2.12472C9.88915 2.14462 9.91152 2.16476 9.93417 2.18514L12.4084 4.41195C12.4347 4.43566 12.4608 4.45906 12.4865 4.48218C13.2263 5.14759 13.7046 5.57786 13.962 6.15564C14.2193 6.73341 14.2191 7.37682 14.2188 8.37183C14.2188 8.4064 14.2187 8.4414 14.2187 8.47684V8.78529C14.2188 9.93389 14.2188 10.8437 14.123 11.5557C14.0245 12.2884 13.8169 12.8815 13.3492 13.3493C12.8815 13.817 12.2884 14.0246 11.5556 14.1231C10.8436 14.2188 9.93386 14.2188 8.78526 14.2188H6.21474C5.06614 14.2188 4.15637 14.2188 3.44436 14.1231C2.7116 14.0246 2.1185 13.817 1.65078 13.3493C1.18305 12.8815 0.975477 12.2884 0.876959 11.5557C0.781232 10.8437 0.78124 9.93389 0.78125 8.78529V6.21477C0.78124 5.06617 0.781232 4.1564 0.876959 3.44439C0.975477 2.71163 1.18305 2.11854 1.65078 1.65081C2.11887 1.18272 2.71395 0.975369 3.44929 0.876953C4.16427 0.781264 5.07856 0.781272 6.23345 0.781281L6.26862 0.781282C6.29934 0.781282 6.32968 0.781274 6.35966 0.781266Z"
                                        fill="#868C98"></path>
                                </g>
                                <defs>
                                    <clipPath id="clip0_1336_18362">
                                        <rect width="15" height="15" fill="white"></rect>
                                    </clipPath>
                                </defs>
                            </svg> <span class="selected-text">Export</span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <li><a class="dropdown-item" href="#">CSV</a></li>
                            <li><a class="dropdown-item" href="#">PDF</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card-body common_datatable_theme table_search_custom common_search_emp scroll_box">
                <table id="equipment-table-list" class=" table theme_table dt-responsive nowrap align-middle  "
                    style="width:100%">
                    <thead>
                        <tr>
                            <th scope="col" style="width: 10px;" class="head-bottom-left-radius">
                                <div class="form-check ctl-tab-hdr-che">
                                    <input class="form-check-input fs-14 cursor-pointer check_All" type="checkbox"
                                        id="checkAll" value="option">
                                </div>
                            </th>
                            <th data-ordering="false">Subscription ID</th>
                            <th data-ordering="false">Plan Name</th>
                            <th data-ordering="false">Total Revenue</th>
                            <th data-ordering="false">Active Subscribers</th>
                            <th data-ordering="false">Churn Rate</th>
                            <th data-ordering="false">Renewal Rate</th>
                            <th class="head-bottom-right-radius">Payment Failures</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="ctl-row-information">
                            <td>
                                <div class="form-check ctl-tab-hdr-che">
                                    <input class="form-check-input fs-14 cursor-pointer individual" type="checkbox"
                                        name="checkAll" value="1">
                                </div>
                            </td>
                            <td>8726</td>
                            <td>Demo</td>
                            <td>6826246</td>
                            <td>35</td>
                            <td>50</td>
                            <td>50</td>
                            <td><span class="ctl-emp-sta-txt ctl-upcommming ">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"
                                            fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#f74850" />
                                        </svg>
                                    </span>
                                    Failures</td>
                        </tr>
                        <tr class="ctl-row-information">
                            <td>
                                <div class="form-check ctl-tab-hdr-che">
                                    <input class="form-check-input fs-14 cursor-pointer individual" type="checkbox"
                                        name="checkAll" value="1">
                                </div>
                            </td>
                            <td>8726</td>
                            <td>Demo</td>
                            <td>6826246</td>
                            <td>35</td>
                            <td>50</td>
                            <td>50</td>
                            <td><span class="ctl-emp-sta-txt ctl-upcommming ">
                                    <span>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"
                                            fill="none">
                                            <circle cx="4" cy="4" r="3" fill="#f74850" />
                                        </svg>
                                    </span>
                                    Failures</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--end col-->
</div>
@endsection
@section('script')
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="http://sat.localhost/ets-saas/public/js/app.js"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.jquery.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.bootstrap5.min.js') }}"></script>
<script src="{{ url('js/datatable-1.11.5_cdn/datatables.responsive.min.js') }}"></script>
<script src="{{ url('js/jquery-validate-1.19.3/jquery-validate.min.js') }}"></script>

<script>
$(document).ready(function() {
    // Initialize Select2
    $('.select-multi').select2();
    $(".select2").select2();
    flatpickr("#date_range", {
        mode: "range",
        dateFormat: "m/d/Y",
        allowInput: true
    });
    // Initialize DataTable
    var table = $('#equipment-table-list').DataTable({
        paging: true,
        searching: false,
        pagingType: "simple_numbers",
        scrollCollapse: true,
        info: true,
        responsive: false,
        scrollX: true,
        ordering: false,
        language: {
            paginate: {
                previous: '<span class="fa fa-chevron-left"></span>',
                next: '<span class="fa fa-chevron-right"></span>'
            }
        }
    });

    // Reinitialize Select2 when Offcanvas is shown
    $('#offcanvasRight').on('shown.bs.offcanvas', function() {
        $(".select2").select2();
    });

    // Fix Select2 dropdown z-index issue inside modal/offcanvas
    $(document).on('click', '.cmp-clk-fil-sec .select2', function() {
        $('.select2-container .select2-dropdown').addClass('ctl-fil-sel2-zin');
    });
    $(".dropdown").each(function () {
        let dropdown = $(this);
        dropdown.find(".dropdown-item").click(function (event) {
            event.preventDefault();
            let selectedText = $(this).text();
            let button = dropdown.find(".dropdown-toggle");
            let iconHtml = button.find("svg").prop("outerHTML");
            if (button.find("span.selected-text").length === 0) {
                button.append(' <span class="selected-text"></span>');
            }
            button.find("span.selected-text").text(selectedText);
            button.addClass("selected");
            dropdown.find(".dropdown-item").removeClass("selected-option").find(".tick-mark").remove();
            $(this).addClass("selected-option").append(`
                <span class="tick-mark">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none">
                        <path d="M16.6666 5L7.49992 14.1667L3.33325 10" stroke="#1F5EFF" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </span>
            `);
        });
    });
});
</script>
@endsection