@extends('admin.layouts.app')
@section('page_tab_title' ,"Products") 
@section('content')
@if ($message = Session::get('success'))
<div class="alert alert-success">
  <p>{{ $message }}</p>
</div>
@endif

<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
    .disabled-buttons {
        pointer-events: none;
        color: #d3d3d3 !important;
    }

    .enabled-buttons {
        cursor: pointer;
    }

    .pagination-div {
        display: flex;
        justify-content: end !important;
    }

    .selected-page {
        background-color: #3DB554 !important;
        border-color: #3DB554 !important;
        color: #ffffff !important;
    }
    .custom-row .col-sm-3 {
        width: 350px !important;
    }
    
    .tab {
        cursor: pointer;
    }
            
    /* .not-selected-page {
        background-color: transparent !important;
    } */
</style>

<section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="shadow-box">
        <ul class="nav nav-tabs portfolio-tab2">
            <input type="hidden" id="active_tab" name="active_tab" value="other" />
            <li id="other" class="active tab"><a>All</a></li>
            <li id="our" class="tab"><a>Our ID Transactions</a></li>
        </ul>
          <div id="table_view" class="box-header adminuser-box">
            <div class="row">
              <div class="col-lg-4 col-md-4">
                <div  class="top-ttl">
                  <h1>
                    Online Transactions
                  </h1>
                </div>
              </div>
              <div class="col-lg-8 col-md-8">
                <div class="pull-right">
                    <button type="button" id="downloadOnlineTotalTranasactions" class="btn custom-btn"><i class="glyphicon glyphicon-export"></i> Export Total</button>
                    <button type="button" id="downloadOnlineTranasactions" class="btn custom-btn"><i class="glyphicon glyphicon-export"></i> Export</button>
                    <!-- <button type="button" name="bulk_active" id="bulk_active" class="btn custom-btn"><i class="glyphicon glyphicon-active"></i>Active</button>
                    <button type="button" name="bulk_deactive" id="bulk_deactive" class="btn custom-btn"><i class="glyphicon glyphicon-active"></i>Deactive</button>
                    <a class="btn custom-btn add-new-btn" href="{{ route('product.import') }}"><i class="fa fa-plus"></i> Import</a>
                    <a class="btn custom-btn add-new-btn" href="{{ route('product.create') }}"><i class="fa fa-plus"></i> Add New</a> -->
                </div>                    
              </div>
  
            </div>
            <hr class="bdr-partition">
          </div>
          <!-- /.box-header -->
          <div class="box-body table-responsive">
            <div id="products_datatable_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                <div class="row custom-row">
                    <div class="col-sm-3">
                        <div class="dataTables_length" id="products_datatable_length">
                    <label>
                        Show
                        <select name="products_datatable_length" aria-controls="products_datatable" id="show_entries" class="form-control input-sm custom-select">
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select> 
                        entries
                    </label>
                </div>
            </div>
            <div class="col-sm-3">
                <div>
                    <label>End:
                        <input type="date" id="end_date" class="form-control input-sm" placeholder="">
                    </label>
                </div>
            </div>
            <div class="col-sm-3">
                <div>
                    <label>Start:
                        <input type="date" id="start_date" class="form-control input-sm" placeholder="">
                    </label>
                </div>
            </div>
            <div class="col-sm-4">
                <div id="products_datatable_filter" class="dataTables_filter">
                    <label>Search:
                        <input type="search" id="search" class="form-control input-sm" placeholder="" aria-controls="products_datatable">
                    </label>
                </div>
            </div>
        
            </div>
                <table class="table table-bordered table-striped ">
                  <thead>
                    <tr>
                      {{-- <th><input type="checkbox" name="all_chk" id="all_chk"></th> --}}
                      {{-- <th>Reference Id</th> --}}
                      <th>Invoice Number</th>
                      <th>Business Name</th>
                      <th>Amount</th>
                      <th>Charge</th>
                      <th>Practitioner Name</th>
                      <th>Reference Number</th>
                      <th>Merchant ID</th>
                      <th>Payment Date / Time</th> 
                      <th>Action</th>               
                    </tr>
                    <input type="hidden" name="id_data" value="" class="id_data">

                    <tbody id="transactions_data">
                    
                    </tbody>
                  </thead>
                </table>
            </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
              <div class="dataTables_info" id="products_datatable_info" role="status" aria-live="polite">
        
              </div>
          </div>
          <div class="col-sm-6 pagination-div">
                <ul class="pagination">
                  <li id="prev-li" class="page-item">
                    <a class="page-link not-selected-page" id="prev" >Previous</a>
                  </li>
                  <li class="page-item" id="page-numbers">
                  </li>
                  <li class="page-item" id="next-li">
                    <a class="page-link not-selected-page" id="next">Next</a>
                  </li>
                </ul>
          </div>
        </div>
        </div>
      </div>
    </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone.min.js"></script>
<script>

    var next_url = "";
    var prev_url = "";
    var path = "";
    let page_numbers = 5;
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content'); 
    let entries = "";
    var search = "";
    var start_date = "";
    var end_date = "";
    var url = "{{route('practitioner.online.transactions.list')}}";

    $(document).ready(function() {
        updateTableData(url,"ready",entries,search, start_date, end_date);
    })

    $(document).on('click','#next', function() {
        var { entries, search, start_date, end_date, active_tab } = getValues();
        updateTableData(next_url,"next",entries,search, start_date, end_date, active_tab);
    })

    $(document).on('click','#prev', function() {
        var { entries, search, start_date, end_date, active_tab } = getValues();
        updateTableData(prev_url,"prev",entries, search, start_date, end_date, active_tab);
    })

    $(document).on('click', '.page_click', function() {
        var { entries, search, start_date, end_date, active_tab } = getValues();
        var url = path+'?page='+parseInt(this.id);
        updateTableData(url,"page_click", entries, search, start_date, end_date, active_tab);
    })

    $(document).on('change', '#show_entries', function() {
        var { entries, search, start_date, end_date, active_tab } = getValues();
        updateTableData(url,"entries", entries, search, start_date, end_date, active_tab);
    })

    $(document).on('change', '#search', function() {
        var { entries, search, start_date, end_date, active_tab } = getValues();
        updateTableData(url,"search", entries, search, start_date, end_date, active_tab);
    })

    $(document).on('change', '#start_date', function() {
        var { entries, search, start_date, end_date, active_tab} = getValues();
        if(!start_date) {
            updateTableData(url,"date", entries, search, start_date, end_date, active_tab);
            $('#end_date').val('');
        } else if(dateCheck(start_date, end_date) && end_date) {
            updateTableData(url,"date", entries, search, start_date, end_date, active_tab);
        }

    })

    $(document).on('change', '#end_date', function() {
        var { entries, search, start_date, end_date, active_tab } = getValues();
        if(!end_date) {
            updateTableData(url,"date", entries, search, start_date, end_date, active_tab);
            $('#start_date').val('');
        } else if(dateCheck(start_date, end_date) && start_date) {
            updateTableData(url,"date", entries, search, start_date, end_date, active_tab);
        }
    })

    function updateTableData(url, flag, entries, search, start_date, end_date, our_id) {    
        if(flag !== "ready") {
            $('#transactions_data').empty();
            $('#page-numbers').empty();
        }

        $.ajax({
            url: url,
            type: 'POST',
            data: { _token: CSRF_TOKEN, entries, search, start_date, end_date, our_id},
            success:function(data){
                var html = "";
                $('.id_data').val(data.total);

                data.data.forEach((element) => {
                    var transaction_id = !element.transaction_id ? " ": element.transaction_id;
                    var invoice_number = !element.invoice_number ? " ": element.invoice_number;

                    html = '<tr>'
                    html += '<td>'+ invoice_number +'</td>';
                    if(element.name) {
                        html += '<td>'+ element.name+'</td>';
                    } else {
                        html += '<td> - </td>';
                    }
                    html += '<td>'+ element.paid_amount +'</td>';
                    html += '<td>'+ element.transaction_charge+'</td>';
                    html += '<td>'+ element.first_name + ' ' + element.last_name +'</td>';
                    if(element.reference_number) {
                        html += '<td>'+ element.reference_number +'</td>';
                    } else {
                        html += '<td> - </td>';
                    }

                    if(element.merchant_id) {
                        html += '<td>'+ element.merchant_id +'</td>';
                    } else {
                        html += '<td> - </td>';
                    }
                    var baseUrl = "{{route('home')}}";
                    baseUrl = baseUrl + '/admin/practitioner/online/transactions/edit/'+element.id;
                    html += '<td>'+ moment(element.created_at).format('DD/MM/YYYY hh:mm a') +'</td>';
                    html += '<td><a class="btn btn-primary btn-action-icon action-edit" title="Edit" href="'+baseUrl+'"> <i class="fa fa-pencil-square-o"></i></td>';
                    html += '</tr>';
                        
                    $('#transactions_data').append(html);
                });

                let from = 0;
                let to = 0;

                if(data.from) {
                    from = data.from;
                }

                if(data.to) {
                    to = data.to;
                }

                $('#products_datatable_info').text(`Showing ${from} to ${to} of ${data.total} entries`);

                var page_number_html = "";
                if(parseInt(data.current_page) !== 1) {
                    page_number_html = pageNumberHtml(1,1,"not-selected-page");
                    $('#page-numbers').append(page_number_html);
                    page_number_html = '<a class="not-selected-page">...</a>';
                    $('#page-numbers').append(page_number_html);
                }

                if(flag === "ready") {
                    pageNumber(data, page_number_html);
                } else {
                    if (parseInt(data.current_page) === 1) {
                        pageNumber(data, page_number_html, "");
                    } else if(parseInt(data.current_page) === parseInt(data.last_page)) {
                        pageNumber(data, page_number_html, "last_page");
                    } else {
                        page_number_html = pageNumberHtml(parseInt(data.current_page - 1),parseInt(data.current_page - 1), "not-selected-page");
                        page_number_html += pageNumberHtml(parseInt(data.current_page),parseInt(data.current_page), "selected-page");
                        page_number_html += pageNumberHtml(parseInt(data.current_page + 1),parseInt(data.current_page + 1), "not-selected-page");
                        $('#page-numbers').append(page_number_html);   
                    }
                }

                if(parseInt(data.current_page) !== parseInt(data.last_page)) {
                    page_number_html = '<a class="not-selected-page">...</a>';  
                    $('#page-numbers').append(page_number_html);
                    page_number_html = pageNumberHtml( parseInt(data.last_page),  parseInt(data.last_page), "not-selected-page");
                    $('#page-numbers').append(page_number_html);
                }
                  
                path = data.path;
                
                if(data.next_page_url !== null) {
                    next_url = data.next_page_url;
                    $('#next').removeClass('disabled-buttons');
                    $('#next-li').removeClass('disabled');
                    $('#next-li').addClass('enabled-buttons');
                } else{
                    $('#next-li').addClass('disabled');
                    $('#next').addClass('disabled-buttons');
                }

                if(data.prev_page_url !== null) {
                    prev_url = data.prev_page_url;
                    $('#prev').removeClass('disabled-buttons');
                    $('#prev-li').removeClass('disabled');
                    $('#prev-li').addClass('enabled-buttons');
                } else{
                    $('#prev-li').addClass('disabled');
                    $('#prev').addClass('disabled-buttons');
                }
                document.getElementById("table_view").scrollIntoView();
            }
        });

        function pageNumber(data, page_number_html, flag) {
            if(flag === "last_page") {
                let array = [];
                for(var i = 0; i < page_numbers; i++) {
                    if(parseInt(i+data.current_page) === data.current_page) {
                        page_number_html = pageNumberHtml(data.current_page - i, data.current_page - i, "selected-page");
                    } else {
                        page_number_html = pageNumberHtml(data.current_page - i, data.current_page - i, "not-selected-page");
                    }
                    array.unshift(page_number_html);
                }
                $('#page-numbers').append(array);
            } else {
                for(var i = 0; i < page_numbers; i++) {
                    if(parseInt(data.current_page) !== parseInt(data.last_page)) {
                        if(parseInt(i+data.current_page) === 1) {
                            page_number_html = pageNumberHtml(i+data.current_page, i+data.current_page, "selected-page");
                        } else {
                            page_number_html = pageNumberHtml(i+data.current_page, i+data.current_page, "not-selected-page")
                        }
                        $('#page-numbers').append(page_number_html);
                    }
                }
            }
        }

        function pageNumberHtml (id, value, classname) {
            return '<a class="page-item enabled-buttons page_click not-selected-page '+ classname +'" id="'+ parseInt(id)+'">'+value+'</a>'
        }
    }

    function dateCheck(startDate, endDate) {

        if(startDate && endDate) {
            if(endDate < startDate) {
                alert("End date must be greater than start date.");
                $('#end_date').val('');
                return false;
            }
        }

        return true;
    }

    function getValues() {
        entries = $('#show_entries').val();
        search = $('#search').val();
        start_date = $('#start_date').val();
        end_date = $('#end_date').val();
        active_tab = $('#active_tab').val();

        var data = { entries, search, start_date, end_date, active_tab };
        return data;
    }

    $(document).on('click', '#downloadOnlineTranasactions', function() {

      if ($('.id_data').val() === 0) {
         Swal.fire({
            icon: 'error',
            title: 'No data found.',
            showClass: {
               popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
               popup: 'animate__animated animate__fadeOutUp'
            }
         });
         return false;
      }

      var { search, start_date, end_date, active_tab } = getValues();
      var baseUrl = "{{route('home')}}";
      baseUrl = baseUrl + '/admin/practitioner/online/transactions/export';

      $.redirect(baseUrl, {
         'start_date': start_date,
         'end_date': end_date,
         'search': search,
         'our_id': active_tab
      }, "GET", "_blank");

    });

    $(document).on('click', '#downloadOnlineTotalTranasactions', function() {
        if ($('.id_data').val() === 0) {
           Swal.fire({
              icon: 'error',
              title: 'No data found.',
              showClass: {
                 popup: 'animate__animated animate__fadeInDown'
              },
              hideClass: {
                 popup: 'animate__animated animate__fadeOutUp'
              }
           });
           return false;
        }

        var { search, start_date, end_date, active_tab } = getValues();
        var baseUrl = "{{route('home')}}";
        baseUrl = baseUrl + '/admin/practitioner/online/total/transactions/export';

        $.redirect(baseUrl, {
           'start_date': start_date,
           'end_date': end_date,
           'search': search,
           'our_id': active_tab
        }, "GET", "_blank");
    });
    
    $(document).on('click', '#other', function() {
        $('#other').addClass('active');
        $('#our').removeClass('active');
        $('#active_tab').val('');

        var { entries, search, start_date, end_date } = getValues();
        updateTableData(url, "date", entries, search, start_date, end_date);
    });

    $(document).on('click', '#our', function() {
        $('#our').addClass('active');
        $('#other').removeClass('active');
        $('#active_tab').val('our_id');

        var { entries, search, start_date, end_date } = getValues();
        updateTableData(url, "date", entries, search, start_date, end_date, 'our_id');
    });

</script>
@stop