<!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;
      }
      .toggle-icon {
      position: relative;
      top: 10px;
      right: 10px;
      cursor: pointer;
      }
      .toggle-icon i {
      font-size: 20px;
      }
      .form-control
      {
        background:#e9e9ed !important;
        color:#000 !important;
      }
   </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  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">Select Pair</label>
                                 <select class="form-control" name="pair" id="pair">
                                    <option value="">No Pair selected</option>
                                    <?php 
                                       $required_pairs = ['1INCH','ADA','AAVE','ATOM','ALGO','AION','AVAX','AKRO','ANT','APE','BAT','BTC','BCH','BNB','BTCST','BAKE','BOME','BONK','CRV','COMP','CAKE','COS','DOGE','DASH','DOT','ETH','EOS','ETC','FTM','FTT','FIL','GALA','GRT','GMT','HBAR','HOT','IOTA','ICP','IOST','JST','KAVA','KSM','LTC','LINK','LIT','LUNA','MANA','MATIC','MDX','NEO','NOT','OMG','ONT','PEPE','QTUM','REEF','RSR','SUN','SHIB','SLP','SOL','SUSHI','SXP','TRX','THETA','TFUEL','UNI','VET','WRX','XRP','XMR','XEM','XLM','XTZ','YFI','YFII','ZEC','ZEN'];
                                       foreach($required_pairs as $required_pairs)
                                       {   
                                           $display_pair=$required_pairs.'USDT';
                                           ?>
                                    <option value="<?php echo $display_pair;?>"><?php echo $required_pairs."/USDT";?></option>
                                    <?php 
                                       }
                                       ?>
                                 </select>
                              </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=='1')
                            {   
                                $turnover='-';
                                $label="Buy";
                            }
                            else
                            {
                                $turnover=$records->quantity;
                                $label="Sell";
                            }
                            $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);
                     
                     
                            if($records->strategy_mode=='1')
                                $sta_modes='Warehouse Mode';
                            else if($records->strategy_mode=='2')
                                $sta_modes='Subbin Mode';
                            else 
                                $sta_modes='Subbin Realtime';
                     
                     
                            if($records->type=='1' && $records->description!='manual_buy')
                            {
                                $order_mode='Auto Buy';
                            }
                            else if($records->type=='1' && $records->description=='manual_buy')
                            {
                                $order_mode='Manual Buy';
                            }
                     
                            
                            else if($records->type=='2' && $records->description!='manual_sell')
                            {
                                $order_mode='Auto Sell';
                            }
                            else
                            {
                                $order_mode='Manual Sell';
                            }
                            
                             
                            ?>
                  <!-- 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 $records->pair;?></h4>
                              </div>
                           </div>
                        </div>
                        <div class="col-6">
                           <div class="pause-btn text-end">
                              <a href="javascript:void(0);" class="btn-outline-primary">
                              <?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"><?php echo $order_mode;?></span></h6>
                              
                           </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>Live 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><?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">
                <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>
            <input type="hidden" name="pair_val" id="pair_value">
         </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`);
         
         
         // 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 start_date='';
         let end_date='';
         let pair='';
         let ordermode='';
         let sta_mode='';
         
         // Load initial data when DOM is ready
         document.addEventListener('DOMContentLoaded', function () {
            loadPage(currentPage,start_date,end_date,pair,ordermode,sta_mode);
         });
         
         // Function to load data dynamically
         function loadPage(page,start_date,end_date,pair,ordermode,sta_mode)
         {
         var uusersid='<?php echo $this->session->get('uusersid');?>';
         var exchange_id='1';
         
         var pair=$("#pair").val();
         
         $.ajax({
         'method': 'POST',
         'url': '<?php echo base_url("/order_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">${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">${item.order_mode}</span></h6>
                                    </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}  </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;
         start_date=start_date;
         end_date=end_date;
         pair=pair;
         ordermode=ordermode;
         sta_mode=sta_mode;
         
         
         document.getElementById('total_count').innerHTML=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++;
         }
         var pair=$("#pair").val();
         var ordermode=$("#ordermode").val();
         var sta_mode=$("#sta_mode").val();
         loadPage(currentPage,start_date,end_date,pair,ordermode,sta_mode);
         }
         
         
         $('#confirm').click(function(){
         $("#date_err").html("");
         var start_date=$("#start_date").val();
         var end_date=$("#end_date").val();
         var pair=$("#pair").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,pair,ordermode,sta_mode);
         }
         
         });
         
         $('#reset').click(function(){
         let currentPage = 1;
         $("#start_date").val('');
         $("#end_date").val('');
         $("#pair").val('');
         $("#ordermode").val('');
         $("#sta_mode").val('');
         
         $('#staticBackdrop1').modal('hide');
         
         loadPage(currentPage);
         });
         
         
         
         
         
         
      </script>
   </body>
</html>
