<?php if (isset($component)) { $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da = $component; } ?>
<?php $component = $__env->getContainer()->make(App\View\Components\AppLayout::class, []); ?>
<?php $component->withName('app-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
    <link rel="stylesheet"
        href="<?php echo e(asset('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css')); ?>">
    <ink rel="stylesheet" href="<?php echo e(asset('https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap4.css')); ?>">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

        <style>
            .user_container {
                max-width: 100%;
                /* margin-left: 10%; */

            }

            /*Payment Management */
            .payment-management {
                /* display: flex;
                    flex-direction: column;
                 */
                width: 100%;
            }

            .payment-transaction {
                width: 100%;
                font-size: 22px;
                font-weight: 400;
                line-height: 30px;
                letter-spacing: 0em;
                /* text-align: left; */
                font-family: Inter;
                font-size: 13px;
                font-weight: 400;
                line-height: 16px;
                letter-spacing: 0px;
                text-align: left;

            }
.payment-transaction-day{
    position: relative;
}
          
            .payment-transaction-day {
        display: flex;
    box-sizing: border-box;
    width: 152px;
    height: 40px;
    border: 1px solid #0B67F0;
    border-radius: 6px;
    background: white;
}

        .payment-transaction-day .clnder
        {   
 width: 100%;
    border: none;
    background-color: transparent !important;
    border-radius: 6px;
    padding: 13px;
    outline: none;
}

           
            .payment-order {
                box-sizing: border-box;
                border-radius: 6px;
                margin-top: 18px;
                height: 90px;
                display: flex;
            }

            .payment-order .payment-order-undelivered {
                box-sizing: border-box;
                width: 280px;
                height: 90px;
                border-radius: 20px;
                background-color: white;
                padding-top: 20px;
                padding-left: 16px;
            }

            .payment-order .payment-order-undelivered p,
            .payment-order .payment-order-completed p {
                font-size: 17px;
                font-weight: 400;
                line-height: 14px;
                letter-spacing: 0px;
            }

            .payment-order .payment-order-undelivered h4 .payment-order .payment-order-completed h4 {
                font-size: 13px;
                font-weight: 700;
                line-height: 11px;
                letter-spacing: 0px;
                margin-bottom: 8px;
            }

            .payment-order .payment-order-completed {
                width: 280px;
                height: 90px;
                background-color: white;
                padding-top: 20px;
                padding-left: 16px;
                /* margin-left: 20px; */
            }

            .payemnt-status {
                width: 100%;
                height: auto;
                margin-top: 20px;
                border-radius: 8px;
                background: white;
                border: 1px solid #1b59f8;
                padding: 10px;
            }

            .payemnt-status-top {
            width: 100%;
            display: flex;
            margin-bottom: 15px;
        }

        .payemnt-status-top-left {
            display: flex;
            flex: 90%;
            flex-wrap:wrap;
        }

        .payment-status-box 
        {
            width:fit-content;
            border-radius:6px;
            border:1px solid #D9DBDE;
            padding:2px 5px;
            height:30px;
            margin-right:20px;
        }
        .payment-status-box p 
        {
            font-size:12px;
            color:#979797;
        }
         .payment-status-box  span 
         {
             background-color:#6788DD;
             padding:3px 5px;
             border-radius:4px;
             font-size:11px;
             color:#ffffff;
             margin-left:8px;
         }
        
        /*===============*/
        .payemnt-status-top-right {
            display: flex;
            flex: 10%;
            gap: 18px;
            margin-top: 13px;
        }

        .payemnt-status-top-right img {
            height: 20px;
        }

        .payemnt-status-top-right p {
            font-size: 16px;
            font-weight: 400;
            line-height: 17px;
            letter-spacing: 0px;
            color: #979797;
        }

            .staff-searchAdd .staff-search {
                margin-left: 17px;
            }

            table {
                caption-side: bottom;
                border-collapse: collapse;
                width: 100%;
            }

            table#dynamic-table {
                width: 80%;
                margin: auto;
                margin-top: 15px;
            }

            tr:nth-child(even) {
                background: #F1F3F9;
            }

            #t-head {
                background: #F1F3F9;
            }

            .payment-status-button {
                /* Badge */
                box-sizing: border-box;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                padding: 1.39086px 6.95431px;
                width: 80px;
                height: 20px;
                color: white;
                background: #5EAA3A;
                border: 0.695431px solid #93C5FD;
                border-radius: 2.78173px;
            }

            .payment-order .payment-order-completed {
                width: 280px;
                height: 90px;
                background-color: white;
                padding-top: 20px;
                padding-left: 16px;
                margin-left: 20px;
                border-radius: 20px;
            }

            .searchbaar {
                width: 320px;
                height: 38px;
                border: 1px solid rgb(181, 180, 180);
                border-radius: 6px;
                line-height:35px;
            }

            .searchbaar input {
                overflow: hidden;
                width: 70%;
                background-color:transparent;
                border: none;
                outline: none;
                color:#A1A9B8;
                font-size: 13px;
            }


              table .paid,
              table .pending ,
              table .refund {
                width: 53px;
                height: 18px;
                border-radius:2.78px;
                color: #ffffff;
                background-color: #5EAA3A ;
                font-size: 8px;
                line-height:15px;
                border : 0.7px solid #93C5FD;
            }

            table .pending
           {
                background-color: #F4BB0D;
            }
           table .refund 
           {
             background-color: #B2001B;
             border:0.7px solid #355D89;
           }

            table .check {
                margin-right: 10px;
                margin-top: 3px;
            }

            .pagination {
                border: none;
                padding: 10px;

            }

            .page-item {
                margin: 5px;

            }

            .users-total {
                width: 265.86px;
                height: 90px;
                background: white;
                border-radius: 8px;
                padding-top: 20px;
                padding-left: 20px;
                margin-left: -10px;
           }

            .users-total p,
            .users-total .users-count-top p {
                font-weight: 400;
                font-size: 14px;
                line-height: 16px;
                color: #8F9BB3;
            }

            .users-count-top {
                display: flex;
                justify-content: space-between;
            }

            .users-total h6 {
                font-weight: 600;
                font-size: 20px;
                line-height: 24px;
                color: #222B45;
                margin-top: -5px;
                text-align: left;
            }

            .nav-item .nav-link {
                background-color: transparent !important;
                border-radius:8px;
            }


            .nav-pills .nav-link.active .users-total,
            .show .nav-link .users-total {
                border: 1px solid #1B59F8;
            }

          .table_link:hover
          {
              background-color:transparent !important;
              /*color:transparent !important;*/
              cursor:pointer;
          }

          #selectAll{
              margin-right:5px;
          }
       
           .input-container {
        position: relative;
    }
.calendar-icon{
    position: absolute;
    float:right;
    margin-left:100px !important;
}
    .header_left_side{
        padding-right:20px;
    }
    .payment-transaction-day input{
        padding:2px 2px;
    }
        </style>
        <header>
            <div class="d-flex justify-content-between header_box">
                <h3>Payment</h3>
                <!--<div class="header_left_side">-->
                  
                <!--    <span class="second"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"-->
                <!--            viewBox="0 0 24 24">-->
                <!--            <path fill="currentColor"-->
                <!--                d="M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71M5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1" />-->
                <!--        </svg> Download</span>-->
                <!--</div>-->
            </div>
        </header>
        <div class="user_container d-block">
            <div class="payment-management">
               
        
                   
          <div class="payment-transaction-day">
                      
              <input type="date" class="clnder" value="date" placeholder=" last 30 days">
              

          </div>
       
       

   

                </div>
              

                <div class="users-add-top" style="margin-top:30px; margin-left:-5px;">
                    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                aria-selected="false">
                                <div style="
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-direction: column;
    color: grey;
    min-width: 236px;
    padding: 11px;
    border-radius: 20px;
">
                                       <img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/undelivered-package-2735824-2276256.png" alt="" style="
    height: 50px;
    width: auto;
    margin: 10px;
">
                                    <div class="users-count-top">
                                        <p>Undelivered Order</p>
                                    </div>
                                    <h6 style="color:#000000;">₹61,400</h6>
                                </div>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
                                data-bs-target="#pills-profile" type="button" role="tab"
                                aria-controls="pills-profile" aria-selected="false">
                                <div style="
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-direction: column;
    color: grey;
    min-width: 236px;
    padding: 11px;
    border-radius: 20px;
">
                                    <svg xmlns="http://www.w3.org/2000/svg" height="12" width="13.5" viewBox="0 0 576 512" style="
    height: 50px;
    width: auto;
    margin: 10px;
"><!--!Font Awesome Free 6.5.2 by @fontawesome  - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>
                                    <div class="users-count-top">
                                        <p>Completed payout</p>
                                    </div>
                                    <h6 style="color:#000000;">₹50,000</h6>
                                </div>
                            </button>
                        </li>

                    </ul>
                </div> <!-------tabs button end  ----->


<!---->
<div class="tab-content" id="pills-tabContent">
    <!------- first tabs  ----->
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
               
                <?php echo $__env->make('components.undelivered_Order', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

  </div> <!-------- tabs close  ------>
  <!--------- second tab ---------->
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
       <?php echo $__env->make('components.Completed_payout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
   
  </div>
</div>

<!---->
                

                </div>
           

   
        
        <!-----calender----->
          <script>
    document.addEventListener("DOMContentLoaded", function() {
        flatpickr("input[type=datetime-local]", {});
    });
</script>

<!-------------------------------------------->


        <script>
            var searchInput = document.getElementById('searchInput');

            // Add event listener to input for filtering
            searchInput.addEventListener('input', function() {
                var filter = searchInput.value.toUpperCase();
                var table = document.getElementById('searchResults');
                var rows = table.getElementsByTagName('tr');

                // Loop through all table rows, and hide those who don't match the search query
                for (var i = 0; i < rows.length; i++) {
                    var cells = rows[i].getElementsByTagName('td');
                    var found = false;
                    for (var j = 0; j < cells.length; j++) {
                        var cell = cells[j];
                        if (cell) {
                            var textValue = cell.textContent || cell.innerText;
                            if (textValue.toUpperCase().indexOf(filter) > -1) {
                                found = true;
                                break;
                            }
                        }
                    }
                    if (found) {
                        rows[i].style.display = '';
                    } else {
                        rows[i].style.display = 'none';
                    }
                }
            });
        </script>

        <script>
            const rowsPerPage = 10;
            const data = [...]; // Your array of transaction data

            // Function to populate table with data for a given page
            function populateTable(page) {
                const tbody = document.querySelector('#searchResults tbody');
                tbody.innerHTML = ''; // Clear existing rows

                const startIndex = (page - 1) * rowsPerPage;
                const endIndex = startIndex + rowsPerPage;

                for (let i = startIndex; i < endIndex && i < data.length; i++) {
                    const rowData = data[i];
                    const row = document.createElement('tr');
                    row.innerHTML = `<td><input type="checkbox" class="check"> ${rowData.date}</td>
                         <td>${rowData.transactionId}</td>
                         <td><button class="${rowData.status.toLowerCase()}">${rowData.status}</button></td>
                         <td>${rowData.totalItems}</td>
                         <td>${rowData.totalOrderAmount}</td>
                         <td>${rowData.totalPayout}</td>`;
                    tbody.appendChild(row);
                }
            }

            // Function to navigate to previous page
            function previousPage() {
                currentPage--;
                if (currentPage < script 1) {
                    currentPage = 1;
                }
                populateTable(currentPage);
            }

            // Function to navigate to next page
            function nextPage() {
                currentPage++;
                const totalPages = Math.ceil(data.length / rowsPerPage);
                if (currentPage > totalPages) {
                    currentPage = totalPages;
                }
                populateTable(currentPage);
            }

            // Function to navigate to specific page
            function goToPage(page) {
                currentPage = page;
                populateTable(currentPage);
            }

            let currentPage = 1;
            populateTable(currentPage);
        </script>


        <script>
            const selectAllCheckbox = document.getElementById('selectAll');
            const checkboxes = document.querySelectorAll('#searchResults tbody input[type="checkbox"]');


            function toggleCheckboxes() {
                checkboxes.forEach(checkbox => {
                    checkbox.checked = selectAllCheckbox.checked;
                });
            }


            selectAllCheckbox.addEventListener('change', toggleCheckboxes);
        </script>
      <!----------celender---->
      <script>
     document.addEventListener("DOMContentLoaded", function() {
        var calendarIcon = document.getElementById("calendar-icon");
        var datepicker = document.getElementById("datepicker");

        calendarIcon.addEventListener("click", function() {
            datepicker.focus();
            datepicker.click(); // Simulate a click on the input field to open the datepicker
        });

        // Initialize datepicker
        var datepickerInstance = new Datepicker(datepicker, {
            autohide: true // Hides the datepicker when a date is selected
        });
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da)): ?>
<?php $component = $__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da; ?>
<?php unset($__componentOriginal8e2ce59650f81721f93fef32250174d77c3531da); ?>
<?php endif; ?>
<?php /**PATH /home/u152672654/domains/drycleaneo.com/public_html/admin/resources/views/components/payment-management.blade.php ENDPATH**/ ?>