<x-app-layout>
    <link rel="stylesheet"
        href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css') }}">
    <ink rel="stylesheet" href="{{ asset('https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap4.css') }}">


        <style>
         
.Payout_Details_1 {
    border: 1px solid #696974;
    padding: 20px 10px;
    border-radius: 10px;
    background-color: #ffffff;
}

.Payout_Details_1 .Payout_1 h6 {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}

.Payout_Details_1 .Payout_1 p {
    font-size: 16px;
    font-weight: 400;
    color: #4d4d4d;
}

.Payout_Details_1 .Payout_2 h6 {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}

.Payout_Details_1 .Payout_2 p {
    font-size: 16px;
    font-weight: 400;
    color: #4d4d4d;
}

.Payout_Details_1 .Payout_3 h6 {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}

.Payout_Details_1 .Payout_3 p {
    font-size: 16px;
    font-weight: 400;
    color: #4d4d4d;
}

.Payout_Details_1 .Payout_3 button {
    color: #35a600;
    font-size: 20px;
    font-weight: 400;
    border: 1px solid #5eaa3a;
    border-radius: 10px;
    padding: 3px;
    background-color: #abd697;
}

.payment_order {
    background-color: #ffffff;
    margin-top: 45px;
    padding: 20px 15px;
    border: 1px solid #1b59f8;
    border-radius: 8px;
    height: 664px;
}

.payment_order p {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}

.payment_order table {
    width: 100%;
    margin-top: 30px;
}

.payment_order table th {
    font-size: 20px !important;
    font-weight: 400;
    color: #696974;
    border: 1px solid #999999;
    text-align: center;
}

.payment_order table td {
    text-align: center;
    font-size: 20px !important;
    font-weight: 500;
    line-height: 30px;
    color: #000000;
    border: 1px solid #979797;
    height: 68px;
}

.payment_order table td h6 {
    font-size: 20px;
    font-weight: 400;
    color: #000000;
}

.payment_order table td p {
    font-size: 11px;
    font-weight: 400;
    color: #696974;
}

.payment_order table td button {
    background-color: #5eaa3a;
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    padding: 2px 25px;
    border-radius: 4px;
}
   .p_para {

            font-size: 20px;
            font-weight: 400;
            color: #000000;
        }
        
    </style>


    <style>
        /* CSS for pagination */
        .pagination-container {
            display: flex;
            justify-content: center;
        }

        .pagination {
            list-style-type: none;
            padding: 0;
            margin-left:40%;
        }

        .pagination li {
            margin-right: 5px;
        }

        .pagination li a {
            text-decoration: none;
            padding: 5px 10px;
            border: 1px solid #DFE3E8;
            color: #C4CDD5;
        }

        .pagination li a.active {
            /* background-color: #007bff; */
            border:1px solid #4200FF;
            color: #fff;
            color:#212B36;
        }
        .Dashboard_header header .header_box {
            width: 97%;
            height: 103px;
            line-height: 103px;
        }
        .Dashboard_header .user_container {
            margin-top: 120px;
            padding: 0 30px;
        }
        .payment_order table td button {
            background-color: #5eaa3a;
            border: none;
            color: #ffffff;
            font-size: 13px;
            font-weight: 500;
            padding: 0px 25px;
            border-radius: 4px;
        }
                .Payout_Details_1 .Payout_3 button {
            color: #35a600;
            font-size: 20px;
            font-weight: 400;
            OPACITY: 0.8;
            border: 1px solid #5eaa3a;
            border-radius: 10px;
            padding: 3px;
            background-color: #abd697;
        }
        table th, table td {
            font-size: 12px !important;
            padding: 0px 5px !important;
            align-items: center !important;
        }
        .payment_order table td button {
            background-color: #5eaa3a;
            border: none;
            color: #ffffff;
            /* font-size: 13px; */
            font-weight: 500;
            padding-top: 0;
            padding-bottom: 0;
            line-height: 2;
            /* padding: 0px 25px; */
            border-radius: 5px;
        }
        </style>
        <header>
            <div class="d-flex justify-content-between header_box" style="border-bottom:none;">
                <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">

              <p class="p_para">
    <a href="{{ route('payment') }}">
        <img src="IMAGES\Vector_arrow.svg" alt="Payout Details">
        <span class="text-dark">Payout Details</span>
    </a>
</p>

                <div class="Payout_Details_1" style="position: relative;">

                    <div class="row">

                        <div class="col-lg-5 col-md-5 col-sm-12">

                            <div class="Payout_1">
                                <p>Transaction ID</p>
                                <h6>123456789012</h6>

                                <div class="mt-5">
                                    <p>Total Order Amount </p>
                                    <h6>₹130.3</h6>
                                </div>

                            </div>

                        </div>

                        <div class="col-lg-5 col-md-5 col-sm-12">
                            <div class="Payout_2">
                                <p>Date
                                </p>
                                <h6>Today, 09:00 AM</h6>

                                <div class="mt-5">
                                    <p>Transaction fee
                                    </p>
                                    <h6> ₹10.53 </h6>
                                </div>

                            </div>
                        </div>

                        <div class="col-lg-2 col-md-2 col-sm-12">
                            <div class="Payout_3">
                                <p>Status
                                </p>
                                <button>Successful</button>

                                <div class="mt-5">
                                    <p>Total payout amount
                                    </p>
                                    <h6>₹980.12 </h6>
                                </div>

                            </div>
                        </div>


                    </div>

                    <div class=""
                        style="border:1px solid #333333;border-radius:20px;width:fit-content;position: absolute; left:40%;background-color:#FFFFFF;">
                        <p class="mb-0 p-2" style="font-style:italic";><img src="IMAGES\material-symbols_check_1.svg"> Deposited to 12345678912345
                        </p>
                    </div>


                </div>

                <div class="payment_order">

                    <p>Orders (4)</p>

                    <table id="myTable">
                        <thead>
                            <tr style="background-color:#F1F3F9">
                                <th>Order info</th>
                                <th>Payment</th>
                                <th>Order amount</th>
                                <th>Transaction fees</th>
                                <th>Payout Amount</th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr>
                                <td>
                                    <h6 class="mb-0">#12283172 </h6>
                                    <p class="mb-0">08 Jan 2024, 5:54 PM</p>
                                </td>

                                <td>
                                    <button>Paid</button>
                                </td>

                                <td>₹250</td>
                                <td>1.99%</td>
                                <td>₹245.03</td>
                            </tr>

                            <tr>
                                <td>
                                    <h6 class="mb-0">#12283172 </h6>
                                    <p class="mb-0">08 Jan 2024, 5:54 PM</p>
                                </td>

                                <td>
                                    <button>Paid</button>
                                </td>

                                <td>₹250</td>
                                <td>1.99%</td>
                                <td>₹245.03</td>
                            </tr>

                            <tr>
                                <td>
                                    <h6 class="mb-0">#12283172 </h6>
                                    <p class="mb-0">08 Jan 2024, 5:54 PM</p>
                                </td>
                                <td>
                                    <button>Paid</button>
                                </td>
                                <td>₹250</td>
                                <td>1.99%</td>
                                <td>₹245.03</td>
                            </tr>

                            <tr>
                                <td>
                                    <h6 class="mb-0">#12283172 </h6>
                                    <p class="mb-0">08 Jan 2024, 5:54 PM</p>
                                </td>

                                <td>
                                    <button>Paid</button>
                                </td>

                                <td>₹250</td>
                                <td>1.99%</td>
                                <td>₹245.03</td>
                            </tr>

                            <tr>
                                <td>
                                    <h6 class="mb-0">#12283172 </h6>
                                    <p class="mb-0">08 Jan 2024, 5:54 PM</p>
                                </td>

                                <td>
                                    <button>Paid</button>
                                </td>

                                <td>₹250</td>
                                <td>1.99%</td>
                                <td>₹245.03</td>
                            </tr>
                            <tr>
                                <td>
                                    <h6 class="mb-0">#12283172 </h6>
                                    <p class="mb-0">08 Jan 2024, 5:54 PM</p>
                                </td>

                                <td>
                                    <button>Paid</button>
                                </td>

                                <td>₹250</td>
                                <td>1.99%</td>
                                <td>₹245.03</td>
                            </tr>
                            <tr>
                                <td>
                                    <h6 class="mb-0">#12283172 </h6>
                                    <p class="mb-0">08 Jan 2024, 5:54 PM</p>
                                </td>

                                <td>
                                    <button>Paid</button>
                                </td>

                                <td>₹250</td>
                                <td>1.99%</td>
                                <td>₹245.03</td>
                            </tr>
                            <tr>
                                <td>
                                    <h6 class="mb-0">#12283172 </h6>
                                    <p class="mb-0">08 Jan 2024, 5:54 PM</p>
                                </td>

                                <td>
                                    <button>Paid</button>
                                </td>

                                <td>₹250</td>
                                <td>1.99%</td>
                                <td>₹245.03</td>
                            </tr>
                            <tr>
                                <td>
                                    <h6 class="mb-0">#12283172 </h6>
                                    <p class="mb-0">08 Jan 2024, 5:54 PM</p>
                                </td>

                                <td>
                                    <button>Paid</button>
                                </td>

                                <td>₹250</td>
                                <td>1.99%</td>
                                <td>₹245.03</td>
                            </tr>


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

                <ul id="pagination" class="pagination mt-3"></ul>

            </div>
<script>
        // Function to display rows based on pagination
        function displayRows(pageNumber, rowsPerPage) {
            var rows = document.querySelectorAll('#myTable tbody tr');
            var startIndex = (pageNumber - 1) * rowsPerPage;
            var endIndex = startIndex + rowsPerPage;

            rows.forEach(function(row, index) {
                if (index >= startIndex && index < endIndex) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        // Function to handle pagination click
        function onPageClick(pageNumber) {
            displayRows(pageNumber, rowsPerPage);
            var paginationLinks = document.querySelectorAll('.pagination li a');
            paginationLinks.forEach(function(link) {
                link.classList.remove('active');
            });
            document.getElementById('page' + pageNumber).classList.add('active');
        }

        var rowsPerPage = 4; // Number of rows per page
        var totalRows = document.querySelectorAll('#myTable tbody tr').length;
        var totalPages = Math.ceil(totalRows / rowsPerPage);

        var pagination = document.getElementById('pagination');

        // Previous Button
        var liPrev = document.createElement('li');
        var aPrev = document.createElement('a');
        aPrev.innerHTML = '&laquo;';
        aPrev.href = '#';
        aPrev.addEventListener('click', function() {
            var currentPage = parseInt(document.querySelector('.pagination li a.active').textContent);
            if (currentPage > 1) {
                onPageClick(currentPage - 1);
            }
        });
        liPrev.appendChild(aPrev);
        pagination.appendChild(liPrev);

        // Pagination Links
        for (var i = 1; i <= totalPages; i++) {
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.textContent = i;
            a.href = '#';
            a.id = 'page' + i;
            a.addEventListener('click', function() {
                onPageClick(parseInt(this.textContent));
            });
            li.appendChild(a);
            pagination.appendChild(li);
        }

        // Next Button
        var liNext = document.createElement('li');
        var aNext = document.createElement('a');
        aNext.innerHTML = '&raquo;';
        aNext.href = '#';
        aNext.addEventListener('click', function() {
            var currentPage = parseInt(document.querySelector('.pagination li a.active').textContent);
            if (currentPage < totalPages) {
                onPageClick(currentPage + 1);
            }
        });
        liNext.appendChild(aNext);
        pagination.appendChild(liNext);

        // Display the first page initially
        onPageClick(1);
    </script>
       
</x-app-layout>
