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

@section('content')

    <section>
        <div class="sales-report-wrapper">
            <div class="page-head-title mb-3">
                <div class=" sales d-flex align-items-center justify-content-between">
                    <div class="d-inline-block">
                        <h2 class="text-title fw-semibold mb-0">Sales 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 Status</option>
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</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="table-responsive mt-3 mb-3">
                        <table class="sr-table">
                            <thead>
                                <tr>
                                    <th><input type="checkbox"></th>
                                    <th>Order ID</th>
                                    <th>Customer Details</th>
                                    <th>Order From</th>
                                    <th>Payment Mode</th>
                                    <th>Total Order Value</th>
                                    <th>Order Status</th>
                                    <th>Order Placed On</th>
                                </tr>
                            </thead>

                            <tbody>

                                <!-- ROW -->
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>COD</td>
                                    <td>₹000</td>
                                    <td class="status-inactive">Out for Delivery</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-active">Delivered</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-active">Delivered</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-active">Delivered</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-active">Delivered</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-active">Delivered</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-active">Delivered</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-active">Delivered</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-active">Delivered</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>
                                    <td>OID001</td>
                                    <td>
                                        <div class="sr-customer">
                                            <span class="sr-name">Customer 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>App</td>
                                    <td>Online</td>
                                    <td>₹000</td>
                                    <td class="status-active">Delivered</td>
                                    <td>00/00/0000 - 00:00 AM</td>
                                </tr>

                                <!-- duplicate rows as needed -->
                            </tbody>
                        </table>
                    </div>


                </div>
            </div>

    </section>
    </div>

    <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>



@endsection
<script>
    function switchTab(type, el) {

        // remove active from all
        document.querySelectorAll('.aws-tab').forEach(tab => tab.classList.remove('active'));
        document.querySelectorAll('.aws-content').forEach(c => c.classList.remove('active'));

        // activate clicked
        el.classList.add('active');

        if (type === 'app') {
            document.getElementById('appTab').classList.add('active');
        } else {
            document.getElementById('webTab').classList.add('active');
        }
    }
</script>