<?php 
  $link_status1 = "";
  $link_status2 = "active";
  $link_status3 = "";
?>
<?php include("includes/top-header.php"); ?>
<?php include("includes/header.php"); 

$token = chr(rand(97,122))."".rand(1,9)."".chr(rand(97,122))."".rand(1,9)."".rand(11,99);
$_SESSION['token'] = $token;
?>
        <!-- Left Panel End -->
        
        <!-- Middle Panel
        ============================================= -->
        <div class="col-lg-9">
<h2 class="fw-400 mb-4">Transactions</h2>

<!-- Filter Section ============================================= -->
<div class="row mb-4">
    <div class="col mb-2">
        <form id="filterTransactions" method="post">
            <div class="row g-3 mb-3">
                <!-- Filter Link ========================= -->
                <div class="col-auto d-flex align-items-center me-auto form-group" data-bs-toggle="collapse">
                    <a class="btn-link text-dark" data-bs-toggle="collapse" href="#allFilters" aria-expanded="false" aria-controls="allFilters">
                        <i class="fas fa-sliders-h text-3 ms-1"></i> All Filters
                    </a>
                </div>

                <!-- Filters Collapse ================================ -->
                <div class="col-12 collapse" id="allFilters">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" id="allTransactions" name="allFilters" checked>
                        <label class="form-check-label" for="allTransactions">All Transactions</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" id="paymentsSend" name="allFilters">
                        <label class="form-check-label" for="paymentsSend">Debits</label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" id="paymentsReceived" name="allFilters">
                        <label class="form-check-label" for="paymentsReceived">Credits</label>
                    </div>
                </div>
                <!-- End Filters Collapse -->
            </div>
        </form>
    </div>
</div>

<!-- Transactions Table ============================================= -->
<div class="bg-white shadow-sm rounded py-4 mb-4">
    <h3 class="text-5 fw-400 d-flex align-items-center px-4 mb-4">Transaction History</h3>

    <!-- Table Headers =============================== -->
    <div class="transaction-title py-2 px-4">
        <div class="row">
            <div class="col-2 col-sm-1 text-center fw-bold">Date</div>
            <div class="col col-sm-7 fw-bold">Description</div>
            <div class="col-auto col-sm-2 d-none d-sm-block text-center fw-bold">Status</div>
            <div class="col-3 col-sm-2 text-end fw-bold">Amount</div>
        </div>
    </div>

    <!-- Transaction List =============================== -->
    <div class="transaction-list" style="overflow: auto; font-size: 0.9rem;">
        <?php
        $st = "select * from trans where memID='".$member_id."' order by tid desc"; 
        $r_t =  $conn->query($st); //run the query
        while($row = $r_t->fetch_assoc()) { 
            $tid = $row['tid'];
            $tmid = $row['memID'];
            $tdate = $row['tDate'];
            $pac = $row['pAccno'];
            $narr = $row['narration'];
            $ammt = $row['amount'];
            $tSt = $row['status'];
            $ttype = $row['type'];

            $get_sym = "select * from account where aNum='".$pac."'"; 
            $rs_sym =  $conn->query($get_sym); //run the query
            while($row = $rs_sym->fetch_assoc()) { 
                $gotten_sym = $row['symbol'];
                $gotten_cur = $row['currency'];
            }

            // Determine Amount Format
            if($ttype == "debit"){
                $t_amount = "<span class='text-nowrap text-danger'>- ".$gotten_sym."".number_format($ammt, 2)."</span> <span class='text-2 text-uppercase'>(".$gotten_cur.")</span>";
            } elseif($ttype == "credit"){
                $t_amount = "<span class='text-nowrap text-success'>+ ".$gotten_sym."".number_format($ammt, 2)."</span> <span class='text-2 text-uppercase'>(".$gotten_cur.")</span>";
            }

            // Status and Icons
            switch($tSt) {
                case 'cot':
                case 'demurrage':
                case 'ffc':
                case 'pending':
                    $st_icon = "<span class='text-warning' data-bs-toggle='tooltip' title='In Progress'><i class='fas fa-ellipsis-h'></i></span>";
                    $st_status = "
                        <ul class='list-unstyled'>
                            <li class='fw-500'>Status: <span class='text-warning'>Transaction Pending</span></li>
                            <li class='text-muted'><a class='btn btn-warning' style='width: 100%;' href='processing.php?action=checkpoint&continue=".$tid."'>Continue</a></li>
                        </ul>
                    ";
                    break;
                case 'completed':
                default:
                    $st_icon = "<span class='text-success' data-bs-toggle='tooltip' title='Completed'><i class='fas fa-check-circle'></i></span>";
                    $st_status = "
                        <ul class='list-unstyled'>
                            <li class='fw-500'>Status:</li>
                            <li class='text-muted'>Completed<span class='text-success text-3 ms-1'><i class='fas fa-check-circle'></i></span></li>
                        </ul>
                    ";
                    break;
            }

            // Render Transaction Item
            echo "
                <div class='transaction-item px-4 py-3' data-bs-toggle='modal' data-bs-target='#transactiondetail_".$tid."'>
                    <div class='row align-items-center flex-row'>
                        <div class='col-2 col-sm-1 text-center'>
                            <span class='d-block text-4 fw-300'>".date("jS", strtotime($tdate))."</span>
                            <span class='d-block text-1 fw-300 text-uppercase'>".date("M", strtotime($tdate))."</span>
                        </div>
                        <div class='col col-sm-7'>
                            <span class='d-block text-4 fw-300'>".$pac."</span>
                            <span class='text-muted'>".$narr."</span>
                        </div>
                        <div class='col-auto col-sm-2 d-none d-sm-block text-center text-3'>".$st_icon."</div>
                        <div class='col-3 col-sm-2 text-end text-4'>".$t_amount."</div>
                    </div>
                </div>

                <!-- Transaction Item Details Modal =========================================== -->
                <div id='transactiondetail_".$tid."' class='modal fade' role='dialog' aria-hidden='true'>
                    <div class='modal-dialog modal-dialog-centered transaction-details' role='document'>
                        <div class='modal-content'>
                            <div class='modal-body'>
                                <div class='row g-0'>
                                    <div class='col-sm-5 d-flex justify-content-center bg-primary rounded-start py-4'>
                                        <div class='my-auto text-center'>
                                            <div class='text-17 text-white my-3'><i class='fas fa-building'></i></div>
                                            <h3 class='text-4 text-white fw-400 my-3'>Newage Union Bank</h3>
                                            <div class='text-8 fw-500 text-white my-4'>".$gotten_sym."".number_format($ammt, 2)."</div>
                                            <p class='text-white'>".date("jS, M Y", strtotime($tdate))."</p>
                                        </div>
                                    </div>
                                    <div class='col-sm-7'>
                                        <h5 class='text-5 fw-400 m-3'>Transaction Details
                                            <button type='button' class='btn-close text-2 float-end' data-bs-dismiss='modal' aria-label='Close'></button>
                                        </h5>
                                        <hr>
                                        <div class='px-3'>
                                            <ul class='list-unstyled'>
                                                <li class='mb-2'>Payment Amount <span class='float-end text-3'>".$gotten_sym."".number_format($ammt, 2)."</span></li>
                                            </ul>
                                            <hr class='mb-2'>
                                            <ul class='list-unstyled'>
                                                <li class='fw-500'>Transaction Type:</li>
                                                <li class='text-muted' style='text-transform: uppercase;'>".$ttype."</li>
                                            </ul>
                                            <ul class='list-unstyled'>
                                                <li class='fw-500'>Transaction ID:</li>
                                                <li class='text-muted'>".rand(11111111111,99999999999)."</li>
                                            </ul>
                                            <ul class='list-unstyled'>
                                                <li class='fw-500'>Description:</li>
                                                <li class='text-muted'>".$narr."</li>
                                            </ul>
                                            ".$st_status."
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Transaction Item Details Modal -->
            ";
        }
        ?>
    </div>
</div>
            <!-- Transaction List End --> 
            
            
            
            <!-- Pagination
            <ul class="pagination justify-content-center mt-4 mb-0">
              <li class="page-item disabled"> <a class="page-link" href="#" tabindex="-1"><i class="fas fa-angle-left"></i></a> </li>
              <li class="page-item"><a class="page-link" href="#">1</a></li>
              <li class="page-item active"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item d-flex align-content-center flex-wrap text-muted text-5 mx-1">......</li>
              <li class="page-item"><a class="page-link" href="#">15</a></li>
              <li class="page-item"> <a class="page-link" href="#"><i class="fas fa-angle-right"></i></a> </li>
            </ul>
            
            Paginations end --> 
            
          </div>
          <!-- All Transactions End --> 
        </div>
        <!-- Middle End --> 
      </div>
    </div>
  </div>
  <!-- Content end --> 
  
  <!-- Footer
  ============================================= -->
  <?php include("includes/footer.php"); ?>
  <!-- Footer end --> 
  
</div>
<!-- Document Wrapper end --> 

<!-- Back to Top
============================================= --> 
<a id="back-to-top" data-bs-toggle="tooltip" title="Back to Top" href="javascript:void(0)"><i class="fa fa-chevron-up"></i></a> 

<!-- Styles Switcher -->

<!-- Styles Switcher End --> 

<!-- Script --> 
<script src="vendor/jquery/jquery.min.js"></script> 
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 
<script src="vendor/daterangepicker/moment.min.js"></script> 
<script src="vendor/daterangepicker/daterangepicker.js"></script> 
<script>
$(function() {
 'use strict';
 
 // Date Range Picker
 $(function() {
    var start = moment().subtract(29, 'days');
    var end = moment();
    function cb(start, end) {
        $('#dateRange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
    $('#dateRange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);
    cb(start, end);
});
});
</script> 
<!-- Style Switcher --> 
<script src="js/switcher.min.js"></script> 
<script src="js/theme.js"></script>
</body>
</html>