From 2ee9074e8615442f56770931402c53ffb8f5f2c7 Mon Sep 17 00:00:00 2001
From: jouls <jl.superalis@gmail.com>
Date: Wed, 20 Mar 2024 17:03:45 +0800
Subject: [PATCH] Added Stylings to Payout Details, and Table

---
 vendor-payouts.php   | 120 +++++++++++++++++++++++++++++++++++++------
 vendor-user-tabs.php |   2 +-
 2 files changed, 104 insertions(+), 18 deletions(-)

diff --git a/vendor-payouts.php b/vendor-payouts.php
index 53bf663..38e345d 100644
--- a/vendor-payouts.php
+++ b/vendor-payouts.php
@@ -255,7 +255,11 @@ if ($_SESSION["userId"] <> "") {
                                                 <td> December 08, 2023 </td>
                                                 <td> Deposited </td>
                                                 <td>
-                                                    <a class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#payoutModal">Details</a>
+                                                    <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#payoutModal">
+                                                        Details
+                                                    </button>
+
+                                                    <!-- <a class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#payoutModal">Details</a> -->
                                                 </td>
                                             </tbody>
                                         </table>
@@ -268,36 +272,66 @@ if ($_SESSION["userId"] <> "") {
             </div>
         </div>
     </section>
-
-    <!-- Modal -->
     <div class="modal fade" id="payoutModal" tabindex="-1" aria-labelledby="payoutModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-xl">
+        <div class="modal-dialog modal-xl" style="width: 1200px;">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="payoutModalLabel">Payout ID: po_123433djfddWW35</h5>
+                    <h5 class="modal-title fs-5" id="payoutModalLabel">Payout ID: po_123433djfddWW35</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
                 <div class="modal-body">
                     <div class="container-fluid">
                         <div class="row">
-                            <div class="col-md-12">
-                                <h6><strong>Payout Information</strong></h6>
+                            <div class="d-flex flex-column mb-4">
+                                <div class="d-flex justify-content-between p-2">
+                                    <div>
+                                        <h6><strong>Payout Information</strong></h6>
+                                    </div>
+                                    <div class="fw-bold">DEPOSITED</div>
+                                </div>
+                                <div class="d-flex justify-content-between p-2">
+                                    <div class="fw-bold">Gross Amount</div>
+                                    <div>₱ 1,150.00</div>
+                                </div>
+                                <div class="d-flex justify-content-between p-2" style="border-bottom: 1px solid #000;">
+                                    <div class="fw-bold"> Fees, Deductions, Adjustments</div>
+                                    <div>- ₱ 35.00</div>
+                                </div>
+                                <div class="d-flex justify-content-between p-2">
+                                    <div class="fw-bold"> Net Amount</div>
+                                    <div>- ₱ 1125.00</div>
+                                </div>
                             </div>
-                            <div clas="col-md-12">
-                                <h6><strong>Bank Information</strong></h6>
+                            <div class="d-flex flex-column mb-4" style="border-bottom: 1px solid #000;">
+                                <div class="d-flex justify-content-between p-2">
+                                    <h6><strong>Bank Information</strong></h6>
+                                </div>
+                                <div class="d-flex justify-content-between p-2">
+                                    <div class="fw-bold">Bank</div>
+                                    <div>EastWest Bank</div>
+                                </div>
+                                <div class="d-flex justify-content-between p-2">
+                                    <div class="fw-bold">Account Name</div>
+                                    <div>Juan De La Cruz</div>
+                                </div>
+                                <div class="d-flex justify-content-between p-2">
+                                    <div class="fw-bold">Account Number</div>
+                                    <div>Ending in 6618</div>
+                                </div>
+
                             </div>
-                            <div clas="col-md-12">
+                            <div clas="mt-5">
                                 <h6><strong>Transaction Logs</strong></h6>
-                                <div class="table-responsive wrap">
+                                <div class="table-responsive">
                                     <table id="example" class="table ec-table">
                                         <thead>
                                             <tr>
-                                                <th scope="col">Type</th>
-                                                <th scope="col">Transaction Date</th>
-                                                <th scope="col">Gross Amount</th>
-                                                <th scope="col">Fee</th>
-                                                <th scope="col">Net Amount</th>
-                                                <th scope="col">Description</th>
+                                                <th>Type</th>
+                                                <th>Transaction Date</th>
+                                                <th>Gross Amount</th>
+                                                <th>Fee</th>
+                                                <th>Net Amount</th>
+                                                <th>Description</th>
 
                                             </tr>
                                         </thead>
@@ -321,6 +355,58 @@ if ($_SESSION["userId"] <> "") {
             </div>
         </div>
     </div>
+    <!-- Modal
+    <div class="modal fade" id="payoutModal" tabindex="-1" aria-labelledby="payoutModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document" style="max-width: 1200px;">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="payoutModalLabel">Payout ID: po_123433djfddWW35</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="container-fluid">
+                        <div class="row">
+                            <div class="">
+                                <h6><strong>Payout Information</strong></h6>
+                            </div>
+                            <div clas="">
+                                <h6><strong>Bank Information</strong></h6>
+                            </div>
+                            <div clas="mt-5">
+                                <h6><strong>Transaction Logs</strong></h6>
+                                <div class="table-responsive">
+                                    <table id="example" class="table ec-table">
+                                        <thead>
+                                            <tr>
+                                                <th>Type</th>
+                                                <th>Transaction Date</th>
+                                                <th>Gross Amount</th>
+                                                <th>Fee</th>
+                                                <th>Net Amount</th>
+                                                <th>Description</th>
+
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            <td> Payment </td>
+                                            <td> December 1, 2020, 10:00 PM </td>
+                                            <td> ₱ 150.OO </td>
+                                            <td> - ₱ 5.00 </td>
+                                            <td> ₱ 145.00 </td>
+                                            <td> FOURFORTY - 175 </td>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Confirm</button>
+                </div>
+            </div>
+        </div>
+    </div> -->
     <!-- End Vendor setting section -->
 
     <!-- Footer Start -->
diff --git a/vendor-user-tabs.php b/vendor-user-tabs.php
index 96944df..8e77193 100644
--- a/vendor-user-tabs.php
+++ b/vendor-user-tabs.php
@@ -9,7 +9,7 @@ $current_page = basename($_SERVER['PHP_SELF']);
         <li <?php if ($current_page == 'vendor-uploads.php') echo 'class="active"'; ?>><a onclick="addProduct();" id="vendor-uploads-link">Uploads</a></li>
         <li <?php if ($current_page == 'vendor-settings.php') echo 'class="active"'; ?>><a href="vendor-settings.php" id="vendor-settings-link">Settings (edit)</a></li>
         <li <?php if ($current_page == 'vendor-refund-history.php') echo 'class="active"'; ?>><a href="vendor-refund-history.php" id="vendor-refund-history-link">Vendor Refund History</a></li>
-        <li <?php if ($current_page == 'vendor-payouts.php') echo 'class="active"'; ?>><a href="vendor-payouts.php" id="vendor-refund-history-link">My Payouts</a></li>
+        <li <?php if ($current_page == 'vendor-payouts.php') echo 'class="active"'; ?>><a href="vendor-payouts.php" id="vendor-refund-history-link">Payouts</a></li>
     </ul>
 </div>