<?php
include"initialize_page.php";
include"systemfunctions.php";
?>
<?php include('resources/header.php') ?>
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<?php include('resources/css-file.php') ?>
<?php include('resources/navigation.php') ?> 

<style>
    .hide{
        display:none;
    }
.table > tbody > tr > td{
    padding: 18px 7px;
}
</style> 
<!-- Dashboard wrapper starts -->
<div class="dashboard-wrapper">
    <div class="main-container">				
        <div class="row">
            <div class="col-sm-12 ac-summ">
                <h2>Search PayTo List</h2>
            </div>
        </div>
       


<div class="row gutter">
    <div class="col-md-10 col-md-offset-1">
            
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab1primary" data-toggle="tab">By Category</a></li>
                            <li><a href="#tab2primary" data-toggle="tab">By Name</a></li>
                            <li><a href="#tab3primary" data-toggle="tab">Search</a></li>
                        </ul>

                        <div class="tab-pane fade in active" id="tab1primary">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="col-md-8">
                                    <label><strong>Browse By Category</strong></label>
                                    <div class="categories" style="padding: 10px;">
                                        <?php
                                    $select_query = "select DISTINCT(x_category) from x_merchants where x_user_id=$user_id  and x_status=1";
                                $select_result = mysqli_query($con,$select_query);
                                $num = mysqli_num_rows($select_result);
                            
                                $i=0;
                                if($num >0)
                                {
                                    $myArray = array();
                                    while($row = mysqli_fetch_array($select_result))
                                    {

                                        ?>
                                        <p data-toggle="collapse" class="Categorylink" data-target="#<?php echo $row['x_category'];?>"><i class="fa fa-chevron-circle-right"></i> <?php echo $row['x_category'];?></p>
                                        <ul id="<?php echo $row['x_category'];?>" class="collapse" style="padding:10px;">
                                        <?php 
                                        $select_query1 = "select * from x_merchants where x_category='".$row['x_category']."'  and x_status=1";
                                $select_result1 = mysqli_query($con,$select_query1);
                                while($row1 = mysqli_fetch_array($select_result1))
                                    {
                                        $myArray[] = $row1;
                                        ?>
                                         
                                           <li><a href="<?php echo website_settingdata('x_weburl'); ?>user/makepayment.php?id=<?php echo $row1['x_merchant_id']; ?>"><i class="fa fa-dot-circle-o"></i> &nbsp;&nbsp;<?php echo $row1['x_merchant_name'];?></a></li>
                                        
                                    <?php 
                                }?>
</ul>
                               <?php 
                           }
                           } 
                                ?>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="panel">
                                        <div class="panel-body">
                                            <p><strong>Pay anyone.</strong> Can't find the company or person you want To Pay? <a href="<?php echo website_settingdata('x_weburl'); ?>user/addmerchant.php">Add your own Pay To account</a> in few simple steps.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab2primary">
                            <div class="row">
                                <div class="col-md-8">
                                <div class="col-md-12">
                                    <label>Browse by first letter of merchant name</label>
                                </div>
                                <div class="col-sm-12 letter" style="margin: 10px;">
                                    <a href="javascript:void(0);" class="active" data-link="A">A</a>
                                    <a href="javascript:void(0);" data-link="B">B</a>
                                    <a href="javascript:void(0);" data-link="C">C</a>
                                    <a href="javascript:void(0);" data-link="D">D</a>
                                    <a href="javascript:void(0);" data-link="E">E</a>
                                    <a href="javascript:void(0);" data-link="F">F</a>
                                    <a href="javascript:void(0);" data-link="G">G</a>
                                    <a href="javascript:void(0);" data-link="H">H</a>
                                    <a href="javascript:void(0);" data-link="I">I</a>
                                    <a href="javascript:void(0);" data-link="J">J</a>
                                    <a href="javascript:void(0);" data-link="K">K</a>
                                    <a href="javascript:void(0);" data-link="L">L</a>
                                    <a href="javascript:void(0);" data-link="M">M</a>
                                    <a href="javascript:void(0);" data-link="N">N</a>
                                    <a href="javascript:void(0);" data-link="O">O</a>
                                    <a href="javascript:void(0);" data-link="P">P</a>
                                    <a href="javascript:void(0);" data-link="Q">Q</a>
                                    <a href="javascript:void(0);" data-link="R">R</a>
                                    <a href="javascript:void(0);" data-link="S">S</a>
                                    <a href="javascript:void(0);" data-link="T">T</a>
                                    <a href="javascript:void(0);" data-link="U">U</a>
                                    <a href="javascript:void(0);" data-link="V">V</a>
                                    <a href="javascript:void(0);" data-link="W">W</a>
                                    <a href="javascript:void(0);" data-link="X">X</a>
                                    <a href="javascript:void(0);" data-link="Y">Y</a>
                                    <a href="javascript:void(0);" data-link="Z">Z</a>
                                </div>
                                <div class="col-sm-12">
                                    <label>Search Results for <span class="activeletter active">A</span></label>
                                    <ul id="merchantbyletter" style="padding:5px;">

                                    </ul>
                                </div>
                            </div>
                             <div class="col-md-4">
                                    <div class="panel">
                                        <div class="panel-body">
                                            <p><strong>Pay anyone.</strong> Can't find the company or person you want To Pay? <a href="<?php echo website_settingdata('x_weburl'); ?>user/addmerchant.php">Add your own Pay To account</a> in few simple steps.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="tab3primary">
                            <div class="col-md-8">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <label> Search By Company Name : <input type="text" name="name" id="Searchbyname"></label>
                                </div>
                            </div>
                                <div class="col-sm-12">
                                    <ul id="merchantbyname" style="padding:5px;">

                                    </ul>
                                </div>
                            </div>
                             <div class="col-md-4">
                                    <div class="panel">
                                        <div class="panel-body">
                                            <p><strong>Pay anyone.</strong> Can't find the company or person you want To Pay? <a href="<?php echo website_settingdata('x_weburl'); ?>user/addmerchant.php">Add your own Pay To account</a> in few simple steps.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                        </div>
    </div>

</div>

        </br>
    </div>
    <!-- Main container ends -->
</div>
<!-- Dashboard wrapper ends -->
<?php include('resources/footer.php') ?>
<?php include('resources/js-file.php') ?>
<script src="js/jQuery.style.switcher.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
    $( function() {
   
   
      $( ".datepicker" ).datepicker({
      changeMonth: true,
      changeYear: false,
      dateFormat:'mm/dd'
    });

  

});
    $(document).ready(function () {
        $("#update_bill_pay").submit(function (e) {
            e.preventDefault();
            $.ajax({
                url: "controller.php", // Url to which the request is send
                type: 'POST', // Type of request to be send, called as method
                data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
                contentType: false, // The content type used when sending data to the server.
                cache: false, // To unable request pages to be cached
                processData: false, // To send DOMDocument or non processed data file it is set to false
                success: function (data)   // A function to be called if request succeeds
                {
                    if (data == 1)
                    {
                        //setTimeout(function(){  }, 3000);
                        alert('updated successfully');
                        window.location.href = '<?php echo website_settingdata('x_weburl'); ?>user/billpay.php';
                    }
                    if (data == 0)
                    {
                        alert("Amount should be in numeric..");
                    }
                    
                }
            });
        });
    });

</script>


<script type="text/javascript">
    $(document).ready(function () {
        //test amount on fill

      var data=JSON.parse('<?php echo json_encode($myArray); ?>');
      str='';
       $.each(data, function(i, item) {
                
                if(data[i].x_merchant_name.toUpperCase().startsWith('A'))
                {
                    str+='<li><a href="<?php echo website_settingdata('x_weburl'); ?>user/makepayment.php?id='+data[i].x_merchant_id+'"><i class="fa fa-dot-circle-o"></i> &nbsp;&nbsp; '+data[i].x_merchant_name+'</a></li>';
                }
               $('#merchantbyletter').html(str);
            });

      $('.letter a').click(function(){
        $('.letter a').removeClass('active');
            var a=$(this).attr('data-link');
            var str='';
            $(this).addClass('active');
                        $('.activeletter').html(a);
            $.each(data, function(i, item) {
                
                if(data[i].x_merchant_name.toUpperCase().startsWith(a))
                {
                    console.log(data[i].x_merchant_name.toUpperCase()+" "+a);
                    str+='<li><a href="<?php echo website_settingdata('x_weburl'); ?>user/makepayment.php?id='+data[i].x_merchant_id+'"><i class="fa fa-dot-circle-o"></i> &nbsp;&nbsp; '+data[i].x_merchant_name+'</a></li>';
                }
               
            });
             $('#merchantbyletter').html(str);
        });

      $('#Searchbyname').keyup(function(){

            var a=$(this).val();
            var str='';
            $.each(data, function(i, item) {
                
                if(data[i].x_merchant_name.toUpperCase().indexOf(a.toUpperCase())>=0)
                {
                    str+='<li><a href="<?php echo website_settingdata('x_weburl'); ?>user/makepayment.php?id='+data[i].x_merchant_id+'"><i class="fa fa-dot-circle-o"></i> &nbsp;&nbsp; '+data[i].x_merchant_name+'</a></li>';
                }
                
            });
            $('#merchantbyname  ').html(str);
        });


      });

   

</script>
<style type="text/css">
    .tab-pane
    {
        border: 1px solid #dde7f3;
    border-top: 0;
    min-height:400px;
    padding: 10px;
    }
    .nav-tabs li.active a, .nav-tabs li.active a:hover {
        border: 1px solid #ddd;
    border-bottom-color: transparent;
    }
    .fade.in {
    opacity: 1;
    display: block;
}
.fade
{
    display: none;
}
.Categorylink
{
    color: #1770aa;
    text-decoration:underline;
    cursor: pointer;
}
.letter .active,.activeletter,.tab-pane .col-md-4 a
{
    color:#228cd1;
    text-decoration: underline;
}
ul#merchantbyletter li
{
    color: #1770aa;
    cursor: pointer;
}

</style>