@extends('layouts.admin_master')
@section('page-title') 
    Admin | Dashboard
@endsection
@section('page-css')
<link href="{!! url('public/vendor/tabulator-master/dist/css/tabulator_bootstrap3.min.css') !!}" type="text/css" rel="stylesheet">

@endsection
@section('page-content')
<div class="row">
<div class="col-md-12">
        <div class="hpanel">
            <div class="panel-heading">Sales from Super Admin to Dealers</div>
            <div class="panel-body">
                
                <div class="" id="adminTransactions"></div>
                
            </div>
            
        </div>
    </div>
</div>

@endsection
@section('page-js')
<!-- <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.4.0/dist/js/tabulator.min.js"></script> -->
<script type="text/javascript" src="{!! url('public/vendor/tabulator-master/dist/js/tabulator.min.js') !!}"></script>
<script type="text/javascript" src="{!! url('public/vendor/tabulator-master/dist/js/xlsx.full.min.js') !!}"></script>
<script type="text/javascript" src="{!! url('public/vendor/tabulator-master/dist/js/jspdf.min.js') !!}"></script>
<script type="text/javascript" src="{!! url('public/vendor/tabulator-master/dist/js/jspdf.plugin.autotable.js') !!}"></script>

<script>
     $(document).ready(function(){
    function link(cell, formatterParams){
      var url = cell.getValue();
      var rowID = cell.getData().id
      return "<a href='"+ base_url + "/senderids/"+rowID+"/edit' class='btn btn-link'>"+url+"</a>";
    }
    function cellDesign (cell, formatterParams){
      var value = cell.getValue();
      return "<span style='color:#54B4D3; font-weight:bold;'>" + value + "</span>";
    }
    function statusDesign (cell, formatterParams){
      var value = cell.getValue();
        if (value !== null) {
            if(value.includes('Approved')){
            return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
        }
        else if(value.includes('Active')){
            return "<span style='color:#3FB449; font-weight:bold;'>" + value + "</span>";
        }
        else{
            return "<span style='color:#E4A11B;'>" + value + "</span>";
        }
      }
    }
    var table = new Tabulator("#adminTransactions", {
    ajaxURL: "admin-dealer-transactions",
    paginationSize: 15,
    layout: "fitColumns",
    
    // --- FIX 1: Correct Pagination Syntax ---
    pagination: true,
    paginationMode: "remote",
    // ----------------------------------------
    
    filterMode: "remote",  
    selectable: false,
    printAsHtml: true,
    ajaxLoaderLoading: $('#logo_spinner').html(),
    
    ajaxResponse: function(url, params, response) {
        if (response.data) {
            return {
                "data": response.data,         
                "last_page": response.last_page 
            };
        }
        return response; 
    },
    
    columns: [
        {
            title: "Dealer Name",
            field: "dealer_name",
            sorter: "string",
            headerFilter:"input",
        },
        {
            title: "Top Up Amount",
            field: "amount",
            formatter: "money", 
            formatterParams: {
                decimal: ".",      // Decimal separator
                thousand: ",",     // Thousands separator
                // symbol: "$",       // Currency symbol
                symbolAfter: false, // Position symbol before number
                precision: 2,      // Number of decimal places
            },
            sorter: "string",
            headerFilter:"input"
        },
        {
            title: "Balance Before",
            field: "current_balance",
            formatter: "money",
            sorter: "string",
            headerFilter:"input",
        },
        {
            title: "Current Balance",
            field: "balance",
            formatter: "money",
            sorter: "string",
            headerFilter:"input",
        },
        {
            title: "Admin Name",
            field: "admin_name",
            sorter: "string",
            headerFilter:"input",
        },        
        {
            title: "Status",
            field: "status",
            sorter: "string",
            headerFilter:"input",
            formatter: statusDesign,
        },      
        {
            title: "Date & Time",
            field: "created_at",
            sorter: "string",
            headerFilter:"input",
        },
    ],
});
    
    $('#keywordField').on('keyup', function(){
      var keyword = $(this).val();
      table.setData("admin-dealer-transactions?keyword=" + keyword);
    });

});
</script>

@endsection