@extends('backend.template.layouts.template-base')
@section('title', 'Reports - Payment Report')

@section('content')
    <div class="container-fluid">
        <section>
            <div class="page-head-title mb-3">
                <div class="payment-report d-flex align-items-center justify-content-between">
                    <div class="d-inline-block">
                        <h2 class="text-title fw-semibold mb-0">Payment Report
                        </h2>
                    </div>

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

                        <a href="http://127.0.0.1:8000/admin/manage-users/create-role"
                            class="button-green d-flex flex-row gap-2 align-items-center px-3">
                            <span>
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">

                                    <!-- Arrow -->
                                    <path d="M12 4V14" stroke="white" stroke-width="2.5" stroke-linecap="round" />
                                    <path d="M8 10L12 14L16 10" stroke="white" stroke-width="2.5" stroke-linecap="round"
                                        stroke-linejoin="round" />

                                    <!-- Tray -->
                                    <path d="M4 16V17C4 18.6569 5.34315 20 7 20H17C18.6569 20 20 18.6569 20 17V16"
                                        stroke="white" stroke-width="2.5" stroke-linecap="round" />

                                </svg>
                            </span>
                            Download
                        </a>
                    </div>
                </div>
            </div>

            <div class="card-border">
                <div class="p-3">
                    <div class="row g-0 align-items-center justify-content-between">
                        <div class="col-md-10 d-flex align-items-center cz-filter-row">
                            <div class="table-search-box cz-search">
                                <img class="table-search-icon"
                                    src="http://127.0.0.1:8000/backend/template/svg-icon/search.svg" alt="search2">
                                <input type="text" placeholder="Search by user ID or name" class="table-search-input"
                                    value="">
                            </div>
                            <div class="cz-date-input">
                                <input type="text" placeholder="Date Range" data-provider="flatpickr"
                                    data-date-format="d M, Y" data-range-date="true" class="cz-date-field">

                                <span class="cz-date-icon">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                                        <rect x="3" y="5" width="18" height="16" rx="3" stroke="#6b7280"
                                            stroke-width="1.5" />
                                        <path d="M3 9H21" stroke="#6b7280" stroke-width="1.5" />
                                        <path d="M8 3V7" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round" />
                                        <path d="M16 3V7" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round" />
                                    </svg>
                                </span>
                            </div>
                            <div class="cz-select">
                                <select class="js-example-basic-single select2-hidden-accessible" name="state"
                                    data-select2-id="select2-data-1-q2w1" tabindex="-1" aria-hidden="true">
                                    <option value="All Status" data-select2-id="select2-data-3-cl70">All Orders</option>
                                    <option value="Active">order1</option>
                                    <option value="Inactive">order2</option>
                                </select>
                            </div>
                            <div>
                                <div class="table-header-drops">
                                    <select class="js-example-basic-single select2-hidden-accessible" name="state"
                                        data-select2-id="select2-data-1-6h8y" tabindex="-1" aria-hidden="true">
                                        <option value="All Status" data-select2-id="select2-data-3-8jv5">All Payments
                                        </option>
                                        <option value="Active">COD</option>
                                        <option value="Inactive">Online</option>
                                    </select>
                                </div>
                            </div>

                        </div>

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

                            <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="pm-table-wrap mt-3 mb-3">
                        <table class="pm-table">
                            <thead>
                                <tr>
                                    <th><input type="checkbox"></th>
                                    <th>Payment ID</th>
                                    <th>Order ID</th>
                                    <th>Customer Details</th>
                                    <th>Payment Mode</th>
                                    <th>Total Order Value</th>
                                    <th>Payment Status</th>
                                    <th>Payment On</th>
                                </tr>
                            </thead>

                            <tbody>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>COD</td>
                                    <td>₹000</td>
                                    <td class="status-active">Pending</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-inactive">Success</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>COD</td>
                                    <td>₹000</td>
                                    <td class="status-active">Pending</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-inactive">Success</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>COD</td>
                                    <td>₹000</td>
                                    <td class="status-active">Pending</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-inactive">Success</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>COD</td>
                                    <td>₹000</td>
                                    <td class="status-active">Pending</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-inactive">Success</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>COD</td>
                                    <td>₹000</td>
                                    <td class="status-active">Pending</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>PAY-001</td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="pm-customer">
                                            <span class="pm-name">Customer X</span>
                                            <span class="pm-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_5611)">
                                                        <mask id="mask0_855_5611" 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_5611)">
                                                            <path
                                                                d="M6.44616 8.72214L5.36699 9.8013C5.13949 10.0288 4.77783 10.0288 4.54449 9.80713C4.48033 9.74297 4.41616 9.68464 4.35199 9.62047C3.75116 9.0138 3.20866 8.37797 2.72449 7.71297C2.24616 7.04797 1.86116 6.38297 1.58116 5.7238C1.30699 5.0588 1.16699 4.42297 1.16699 3.8163C1.16699 3.41964 1.23699 3.04047 1.37699 2.69047C1.51699 2.33464 1.73866 2.00797 2.04783 1.7163C2.42116 1.3488 2.82949 1.16797 3.26116 1.16797C3.42449 1.16797 3.58783 1.20297 3.73366 1.27297C3.88533 1.34297 4.01949 1.44797 4.12449 1.59964L5.47783 3.50714C5.58283 3.65297 5.65866 3.78714 5.71116 3.91547C5.76366 4.03797 5.79283 4.16047 5.79283 4.2713C5.79283 4.4113 5.75199 4.5513 5.67033 4.68547C5.59449 4.81964 5.48366 4.95964 5.34366 5.09964L4.90033 5.56047C4.83616 5.62464 4.80699 5.70047 4.80699 5.7938C4.80699 5.84047 4.81283 5.8813 4.82449 5.92797C4.84199 5.97464 4.85949 6.00963 4.87116 6.04463C4.97616 6.23713 5.15699 6.48797 5.41366 6.7913C5.67616 7.09464 5.95616 7.4038 6.25949 7.71297C6.31783 7.7713 6.38199 7.82964 6.44033 7.88797C6.67366 8.11547 6.67949 8.4888 6.44616 8.72214Z"
                                                                fill="#6B7280" />
                                                            <path
                                                                d="M12.8164 10.6939C12.8164 10.8572 12.7873 11.0264 12.7289 11.1897C12.7114 11.2364 12.6939 11.2831 12.6706 11.3297C12.5714 11.5397 12.4431 11.7381 12.2739 11.9247C11.9881 12.2397 11.6731 12.4672 11.3173 12.6131C11.3114 12.6131 11.3056 12.6189 11.2998 12.6189C10.9556 12.7589 10.5823 12.8347 10.1798 12.8347C9.58475 12.8347 8.94892 12.6947 8.27809 12.4089C7.60725 12.1231 6.93642 11.7381 6.27142 11.2539C6.04392 11.0847 5.81642 10.9156 5.60059 10.7347L7.50809 8.82724C7.67142 8.94974 7.81725 9.04307 7.93975 9.10724C7.96892 9.11891 8.00392 9.13641 8.04475 9.15391C8.09142 9.17141 8.13809 9.17724 8.19059 9.17724C8.28975 9.17724 8.36559 9.14224 8.42975 9.07807L8.87309 8.64057C9.01892 8.49474 9.15892 8.38391 9.29309 8.31391C9.42725 8.23224 9.56142 8.19141 9.70725 8.19141C9.81809 8.19141 9.93475 8.21474 10.0631 8.26724C10.1914 8.31974 10.3256 8.39557 10.4714 8.49474L12.4023 9.86557C12.5539 9.97057 12.6589 10.0931 12.7231 10.2389C12.7814 10.3847 12.8164 10.5306 12.8164 10.6939Z"
                                                                fill="#6B7280" />
                                                        </g>
                                                    </g>
                                                    <defs>
                                                        <clipPath id="clip0_855_5611">
                                                            <rect width="14" height="14" fill="white" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                123456789</span>
                                        </div>
                                    </td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-inactive">Success</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>



                </div>
            </div>

        </section>


        <div class="modal fade" id="DuplicateRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightGreen">
                        <h3 class="color-green modal-title mb-0">Duplicate Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to duplicate
                            <span class="fw-semibold">"Role X"</span>
                            permissions to
                            <span class="fw-semibold">“Role Y”?</span>
                        </p>

                        <p class="mb-0 secondary-text mt-1">This will create a new role with the same permissions as the
                            selected role.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-green ">Yes, Duplicate</button>
                    </div>

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


        <div class="modal fade" id="DuplicateAndAssignRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightGreen">
                        <h3 class="color-green modal-title mb-0">Duplicate &amp; Assign Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to duplicate
                            <span class="fw-semibold">"Role X"</span>
                            and directly apply its permissions to
                            <span class="fw-semibold">“Role Y”?</span>
                        </p>

                        <p class="mb-0 secondary-text mt-1">This will create a new role with the same permissions as the
                            selected role. Make sure the permissions are well aligned with the new role.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-green ">Yes, Duplicate</button>
                    </div>

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


        <div class="modal fade" id="DeleteRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightRed">
                        <h3 class="text-color-error modal-title mb-0">Delete Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to delete <span class="fw-semibold ">[Role
                                Name]?</span></p>

                        <p class="mb-0 secondary-text mt-1">This action will permanently remove the role and all its
                            assigned permissions.</p>

                        <p class="mb-0 info-text mt-2">
                            <img loading="lazy" src="http://127.0.0.1:8000/backend/template/images/svg/info.svg"
                                alt="info">
                            If the role is currently assigned to any users, it will remove their access permissions.
                        </p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-red">Delete Role</button>
                    </div>

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


        <div class="modal fade" id="ActivateRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightGreen">
                        <h3 class="color-green modal-title mb-0">Activate Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Do you want to activate <span class="fw-semibold">[Role Name]?</span>
                        </p>

                        <p class="mb-0 secondary-text mt-1">Users assigned to this role will regain access to its
                            permissions.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-green ">Activate Role</button>
                    </div>

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


        <div class="modal fade" id="InactivateRoleModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content rounded-16 overflow-hidden">

                    <div class="modal-header bg-color-lightOrange">
                        <h3 class="color-orange modal-title mb-0">Inactivate Role</h3>
                        <button type="button" class="btn-close opacity-0" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <p class="mb-0 text-title">Are you sure you want to deactivate <span class="fw-semibold">[Role
                                Name]?</span></p>

                        <p class="mb-0 secondary-text mt-1">Users assigned to this role will no longer have access to its
                            permissions.</p>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="button-outline" data-bs-dismiss="modal">Cancel</button>
                        <button class="button-orange">Inactivate Role</button>
                    </div>

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


    </div>
@endsection
<script>
    document.addEventListener("DOMContentLoaded", function() {

        document.querySelectorAll('[data-provider="flatpickr"]').forEach(function(el) {

            flatpickr(el, {
                mode: el.dataset.rangeDate ? "range" : "single",
                dateFormat: "d M, Y",
            });

        });

    });
</script>