<!doctype html>
<html lang="en" class="w-[640px]">
   <head>
      <?php echo view('user/layout/head');?>
   </head>
   <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/base/jquery-ui.css">
   <style>
      .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
      }
      .pagination-btn {
      background: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      margin: 0 5px;
      }
      .pagination-btn:disabled {
      background: #6c757d;
      cursor: not-allowed;
      }
      #pageInfo {
      align-self: center;
      margin: 0 10px;
      color:white !important;
      }
      #myItems { padding:10px;}
      .modal-backdrop { --bs-backdrop-zindex:none;}
      .quantify-wrap
      {
        height:78vh !important;
      }
      .form-control
      {
        background:#e9e9ed !important;
        color:#000 !important;
      }
      @media only screen and (max-width:432px) {
     .mobile{
         display:block !important;
     }   
     .desk 
     {
        display:none !important;
     }
     .quantify-wrap
     {
        height:76vh !important;
     }
     .tex
     {
         float:left !important;
         margin:0px;
         
     }
    }
    
    .quantify-history li {
  margin: 10px 10px;
  font-size: 12px;
}
.quantify-inner-box {
    min-height:130px;
    overflow:auto;
}

@media only screen and (max-width:720px) {
    
 .tex
 {
     float:left !important;
     margin:0px;
     
 }
}

.tex
 {
     float:right;
     
 }



   </style>
   <body class="section-overflow">
      <!--banner start -->
      <?php 
         use App\Libraries\MyEncrypt;
         use App\Helpers\site_helper;
         use App\Helpers\form_helper;
         $this->db = db_connect();
         $this->session = session();
         $uusersid = $this->session->get('uusersid');
         
         if(!empty($this->session->get('exchange')))
             $exchange=$this->session->get('exchange');
         else
             $exchange='1';
         
         $this->common_model = model('CommonModel');
         helper('form_helper');
         $buy_bal='0';
         $tradSets = $this->common_model->GetResults('adminsettings','');
         $tradSet = $tradSets[0];
         $activation='';
         $usdt_balance='0';
         $sno=0;
         
         ?>
      <section class="banner-bg overall-bg ">
         <div class="container">
            <?php echo view('user/layout/header');?>
         </div>
         <section class="dash-wrap quantify-wrap">
            <div class="container">
            <div class="row">
               <div class="col-12">
                  <div class="quantify-header d-flex align-items-center text-white justify-content-between">
                     <div class="trade-content ms-2">
                        <h6 class="text-white fw-semibold aleo mb-0 align-items-center">
                        <span id="total_count"> <?php echo $count;?> </span> Records
                     </div>
                     <div class="repeat-icon d-flex align-items-center">
                        <a data-bs-toggle="modal" data-bs-target="#staticBackdrop1" data-bs-whatever="@fat" class="text-decoration-none">
                        <i class="fa fa-filter" id="balance_load" ></i>
                        </a>
                     </div>
                  </div>
               </div>
            </div>
            <div class="modal fade" id="staticBackdrop1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" style="display: none;" aria-hidden="true">
               <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content" style="border-radius:30px;padding: 11px;" >
                     <div class="modal-header" style="padding-top: 11px;margin-bottom:-15px;">
                        <p class="modal-title" id="staticBackdropLabel" style="padding-left:170px;"><b>Records Filter</b></p>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                     </div>
                     <div class="modal-body">
                        <div class="form-check form-check-right mb-3" style="font-size: 14px;">
                           <div class="row col-lg-12 mt-3">
                              <div class="form-group col-lg-6">
                                 <label class="btn btn-default">Start Date</label>
                                 <input type="text" name="start_date" id="start_date" class="form-control" required>
                              </div>
                              <div class="form-group col-lg-6">
                                 <label class="btn btn-default">End Date</label>
                                 <input type="text" name="end_date" id="end_date" class="form-control" required>
                              </div>
                              <div class="form-group col-lg-6">
                                 <label class="btn btn-default">Order From</label>
                                 <select class="form-control" name="ordermode" id="ordermode">
                                    <option value="">Order From</option>
                                    <option value="1">Auto Buy</option>
                                    <option value="2">Auto Sell</option>
                                    <option value="3">Manual Buy</option>
                                    <option value="4">Manual Sell</option>
                                 </select>
                              </div>
                              <div class="form-group col-lg-6">
                                 <label class="btn btn-default">Strategy Mode</label>
                                 <select class="form-control" name="sta_mode" id="sta_mode">
                                    <option value="">All</option>
                                    <option value="1">Warehouse Mode</option>
                                    <option value="2">Subbin Mode</option>
                                    <option value="3">Subbin Realtime</option>
                                 </select>
                              </div>
                              <div id="date_err" style="color:red;font-size:12px;font-weight:bold;"></div>
                           </div>
                        </div>
                     </div>
                     <div class="modal-footer" >
                        <button  type="button" class="btn btn-secondary" name="button"  id="confirm">Confirm</button>
                        <button  type="button" class="btn btn-secondary" name="button"  id="reset">Reset</button>
                     </div>
                  </div>
               </div>
            </div>
            <?php 
               if($records)
               {
                   ?>
            <div class="row justify-content-center mb-3" id="myItems">
            <div class="col-md-12 col-xl-12">
               <?php 
                  $i=0;
                     foreach ($records as $records) 
                     {
                         $i++;
                         $type=$records->type;
                         if($type=='buy')
                         {   
                             $turnover='-';
                             $label="Buy";
                             $color='green';
                         }
                         else
                         {
                             $turnover=$records->quantity;
                             $label="Sell";
                             $color='red';
                         }
                         $get_mode=$this->db->query("select * from trade_process where id='".$records->trade_process_id."'")->getRow();
                         $mode=$get_mode->strategy_type;
                         $order_time=date("Y-m-d H:i:s",$records->time/1000);
                         $base = substr($records->pair, 0, -4);
                         
                         $display_pair=$base.'/USDT';
                         ?>
                            <!-- Taping content st-->
                            <div id="quantify-section" class="quantify-box py-4">
                                <div class="row my-items-section" >
                                    <div class="col-6" style="margin-bottom:10px">
                                        <div class="trade-using-coin d-flex align-items-center">
                                        <div class="btc-ico">
                                            <img style="width:30px;height:29px" src="<?php echo base_url('styles/images/tradingpair_images/'.$records->pair.'.png');?>" alt="">
                                        </div>
                                        <div class="value-coin">
                                            <h4 class="text-white mb-0"><?php echo $display_pair;?></h4>
                                        </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="pause-btn text-end">
                                        <a href="javascript:void(0);" class="btn-outline-primary" style="background:<?php echo $color;?>;border:none;">
                                        <?php echo $label;?>
                                        </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="qunatify-inner-sec">
                                    <div class="quantify-inner-box d-flex align-items-center justify-content-between">
                                        <div class="quantify-inner-box-left">
                                        <small class="text-white fw-medium ">Turnover: <?php echo $turnover;?></small>
                                        <h6 class="text-white fw-medium aleo">Order Time: <?php echo $order_time;?>&nbsp;&nbsp;<span class="mode btn-outline-primary desk"><?php echo $mode;?></span></h6>
                                        <span class="mode text-white  fw-medium aleo btn-outline-primary mobile" style="display:none"><?php echo $mode;?></span>
                                        </div>
                                        <div class="quantify-inner-box-right toggle-icon" onclick="toggle('<?php echo $i;?>');">
                                        <i class="fa fa-circle-chevron-down text-white"></i>
                                        </div>
                                    </div>
                                    <div class="row" style="border:none;display:none;" id="nav<?php echo $i;?>">
                                        <div class="col-6">
                                        <ul class="quantify-history quantify-history-left text-start list-unstyled mb-0">
                                            <li>Order No</li>
                                            <li>Order Limit</li>
                                            <li>Filled Quantity</li>
                                            <li>Filled Amount</li>
                                        </ul>
                                        </div>
                                        <div class="col-6">
                                        <ul class="quantify-history quantify-history-right text-end list-unstyled mb-0">
                                            <li><?php echo $records->order_id;?></li>
                                            <li>Market</li>
                                            <li><?php echo $records->received_amount;?> <?php echo $base;?></li>
                                            <li><?php echo $records->quantity;?> USDT</li>
                                        </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Taping content end-->
                            <?php 
                                } } else {
                                ?>
                            <div class="quantify-box py-4">
                                <div class="qunatify-inner-sec">
                                    <div class="quantify-inner-box d-flex align-items-center justify-content-between">
                                        <div class="quantify-inner-box-left">
                                        <h4 class="text-white fw-medium aleo"> No Transaction Records Found</h4>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <?php } ?>
                </div>
            </div> 
            <div class="pagination"  style="margin-bottom:15px">
                  <button id="prevPage" class="pagination-btn" onclick="changePage('prev')">« Previous</button>
                  <span id="pageInfo"></span>
                  <button id="nextPage" class="pagination-btn" onclick="changePage('next')">Next »</button>
               </div>
                           <p style="color:#fff;"><b>*Trade Pilot by APFM*:</b> Our mission is to empower investors by optimizing their profit potential, even during times when they are busy, asleep, or occupied with other commitments. 
            Our cutting-edge platform ensures seamless and efficient trading, enabling investors to achieve consistent results without constant monitoring.</p>
            <div style="clear:both;height:40px;"><br><br></div>
                                                         

         </section>
         <!--footer start -->
         <?php echo view('user/layout/footer');?>
         <!--footer end -->
      </section>
      <?php echo view('user/layout/footer-script');?>
      <script>
         AOS.init({
         });
      </script>
      <script src="<?php echo base_url();?>/styles/new_style/js/notify.js"></script>
      <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
         <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
      <script type="text/javascript">
         $( function() {
             $( "#start_date").datepicker({
                 dateFormat: 'yy-mm-dd'
             });
                             $( "#end_date").datepicker({
                 dateFormat: 'yy-mm-dd'
             });
         } );
         function view_trade(str)
         {
         window.location="<?php echo base_url();?>/tradedetails/"+str;
         }
         
         function toggle(id) {
         // Get the target content and icon
         const content = document.getElementById('nav' + id);
         const icon = document.querySelector(`.toggle-icon[onclick="toggle('${id}');"] i`);
         
         // Get all contents and icons to hide/show them
         /*document.querySelectorAll('.items-owner-box[id^="nav"]').forEach((section) => {
         if (section.id !== 'nav' + id) {
         section.style.display = 'none';
         }
         });
         
         document.querySelectorAll('.toggle-icon i').forEach((iconElement) => {
         iconElement.classList.remove('fa-circle-chevron-up');
         iconElement.classList.add('fa-circle-chevron-down');
         });*/
         
         // Toggle the selected content
         if (content.style.display === 'flex') {
         content.style.display = 'none';
         icon.classList.remove('fa-circle-chevron-up');
         icon.classList.add('fa-circle-chevron-down');
         } else {
         content.style.display = 'flex';
         icon.classList.remove('fa-circle-chevron-down');
         icon.classList.add('fa-circle-chevron-up');
         }
         }
         
         let currentPage = 1;
         const itemsPerPage = 10; // Number of items per page
         let totalPages =1;
         let ordermode='';
         let sta_mode='';
         
         // Load initial data when DOM is ready
         document.addEventListener('DOMContentLoaded', function () {
         var start_date='';
         var end_date='';
         loadPage(currentPage,start_date,end_date,ordermode,sta_mode,ordermode,sta_mode);
         });
         
         // Function to load data dynamically
         function loadPage(page, start_date, end_date, ordermode, sta_mode) {
         const uusersid = '<?php echo $this->session->get('uusersid'); ?>';
         const exchange_id = '1';
         const pair = '<?php echo $symbol; ?>';
         
         $.ajax({
         method: 'POST',
         url: '<?php echo base_url("/trade_records"); ?>',
         data: {
            exchange: exchange_id,
            uusersid: uusersid,
            pair: pair,
            page: page,
            itemsPerPage: itemsPerPage,
            start_date: start_date,
            end_date: end_date,
            ordermode: ordermode,
            stamode: sta_mode,
         },
         success: function (response) {
            const data = JSON.parse(response);
            const myItems = document.getElementById('myItems');
            myItems.innerHTML = '';
         
            if (data.items.length === 0) {
                myItems.innerHTML = `
                     <div class="quantify-box py-4">
                        
                            <div class="qunatify-inner-sec">
                                <div class="quantify-inner-box d-flex align-items-center justify-content-between">
                                    <div class="quantify-inner-box-left">
                                    
                                    <h4 class="text-white fw-medium aleo"> No Transaction Records Found</h4>
                                    </div>
                                    
                                </div>
                                
                            </div>
                        </div>`;
            } else {
                data.items.forEach(item => { 
                   
         
                    myItems.innerHTML += `
                        <div class="quantify-box py-4">
                            <div class="row my-items-section">
                                <div class="col-6" style="margin-bottom:10px">
                                    <div class="trade-using-coin d-flex align-items-center">
                                        <div class="btc-ico">
                                            <img style="width:30px;height:29px" src="<?php echo base_url();?>/${item.image}" alt="">
                                        </div>
                                        <div class="value-coin">
                                            <h4 class="text-white mb-0">${item.pair} </h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="pause-btn text-end">
                                        <a href="javascript:void(0);" class="btn-outline-primary" style="background:${item.color};border:none;">${item.type}</a>
                                    </div>
                                </div>
                            </div>
                            <div class="qunatify-inner-sec">
                                <div class="quantify-inner-box d-flex align-items-center justify-content-between">
                                    <div class="quantify-inner-box-left">
                                        <small class="text-white fw-medium">Turnover: ${item.turnover}</small>
                                        <h6 class="text-white fw-medium aleo">Order Time: ${item.orderTime}&nbsp;&nbsp;<span class="mode btn-outline-primary tex">${item.order_mode}</span></h6>
                                         <br>
                                            <span class="mode btn-outline-primary  text-white" >${item.sta_mode}</span>
                                           <span class="mode btn-outline-primary  text-white" >${item.mode}</span>
                                    </div>
                                    <div class="quantify-inner-box-right toggle-icon" onclick="toggle('${item.id}');">
                                        <i class="fa fa-circle-chevron-down text-white"></i>
                                    </div>
                                </div>
                                <div class="row" style="border:none;display:none;" id="nav${item.id}">
         
                                      ${item.method === '2' ? `
                                  <div class="row" style="margin:10px">
                  <div class="col-12">
                     <div class="quantify-header d-flex align-items-center text-white justify-content-between">
                        <div class="trade-content ms-2">
                           <h6 class="text-white fw-semibold aleo mb-0 align-items-center">
                           <span id="total_count"> Profit : ${item.profit} | Fuel : ${item.fuel} ${item.order_mode === 'Manual Sell' ? ` | Sell Execution: ${item.sell_per} ` : ''} </span> 
                        </div>
                        <div class="repeat-icon d-flex align-items-center">
                          
                          
                           <a style="color:green;font-size:14px;font-weight:bold;" class="text-decoration-none">
                         ${item.percentage}
                           </a>
                        </div>
                     </div>
                  </div>
               </div>
                             ` : ''}
         
               
         
                                    <div class="col-6">
                                        <ul class="quantify-history quantify-history-left text-start list-unstyled mb-0">
                                            <li>Order No</li>
                                            <li>Order Limit</li>
                                            <li>Market Execution Price</li>
                                            <li>Filled Quantity</li>
                                            <li>Filled Amount</li>
                                        </ul>
                                    </div>
                                    <div class="col-6">
                                        <ul class="quantify-history quantify-history-right text-end list-unstyled mb-0">
                                            <li>${item.orderNo}</li>
                                            <li>Market Price</li>
                                            <li>${item.averagePrice}</li>
                                            <li>${item.filledQuantity} ${item.tradingPair}</li>
                                            <li>${item.filledAmount} ${item.currency}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>`;
                });
            }
         
            totalPages = data.totalPages;
            document.getElementById('total_count').innerText = data.totalitems;
            document.getElementById('prevPage').disabled = !data.hasPrev;
            document.getElementById('nextPage').disabled = !data.hasNext;
            document.getElementById('pageInfo').innerText = `Page ${page} of ${data.totalPages}`;
         },
         });
         }
         
         
         
         
         
         function changePage(direction) {
         if (direction === 'prev' && currentPage > 1) {
         currentPage--;
         } else if (direction === 'next' && currentPage < totalPages) {
         currentPage++;
         }
         loadPage(currentPage);
         }
         
         $('#confirm').click(function(){
         $("#date_err").html("");
         var start_date=$("#start_date").val();
         var end_date=$("#end_date").val();
         var ordermode=$("#ordermode").val();
         var sta_mode=$("#sta_mode").val();
         
         if(start_date!='' && end_date=='')
         {
         $("#date_err").html("Start and End date Must Required");
         }
         else if(start_date=='' && end_date!='')
         {
         $("#date_err").html("Start and End date Must Required");
         }
         else
         {
         $('#staticBackdrop1').modal('hide');
         let currentPage = 1;
         loadPage(currentPage,start_date,end_date,ordermode,sta_mode);
         }
         
         });
         
         $('#reset').click(function(){
         let currentPage = 1;
         loadPage(currentPage);
         });
         
         
         
         
         
         
         
         
      </script>
   </body>
</html>
