@extends('template.coin.layouts.base')

@section('title', __('Fund History'))

@section('css')
<link href="{{getTemplateFiles('coin')}}/assets/user/css/app.css?ver=132" type="text/css" rel="stylesheet"> 
<style>
.dark-mode .nk-odr-amount .number-md{
    color: #b6c6e3;
}
.dark-mode .nk-olist {
    border: 1px solid #dbdfea;
    border-radius: 4px;
    background: #141c26 !important;
}
.dark-mode .lead-text{
    color: #fff !important;
}
.dark-mode .nk-olist-item .data {
    font-weight: 500;
    color: #fff;
}
.dark-mode .nk-olist-item-final .data {
    font-weight: 500;
    color: #fff !important;
}

</style>
@endsection

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
          
            
            <div class="nk-block-head">
                <div class="nk-block-head-sub"><span>Transactions</span></div>
                <div class="nk-block-between-md g-4">
                    <div class="nk-block-head-content">
                        <h2 class="nk-block-title fw-normal">Transactions</h2>
                        <div class="nk-block-des"><p>List of transactions in your account.</p></div>
                    </div>
                    <div class="nk-block-head-content">
                        <ul class="nk-block-tools gx-3">
                          
                            <li>
                                <a href="{{secure_url('deposits')}}" class="btn btn-primary"><span>Deposit</span> <em class="icon ni ni-arrow-long-right"></em></a>
                            </li>
                            <li>
                                <a href="{{secure_url('withdrawals')}}" class="btn btn-dim btn-outline-light"><span>Withdraw</span> <em class="icon ni ni-arrow-long-right"></em></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <ul class="nk-nav nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link {{ __active_class($type , 'transacts') }}" href="{{secure_url('transactions')}}">Historys</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  {{ __active_class($type , 'deposit') }}" href="{{secure_url('transactions')}}?type=deposit">Deposit</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  {{ __active_class($type , 'withdraw') }}" href="{{secure_url('transactions')}}?type=withdraw">Withdraw</a>
                </li>
              
            </ul>
            
            <div class="nk-block nk-block-xs">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h6 class="nk-block-title">{{get_txn_title($type)}}</h6>
                        </div>
                        <ul class="nk-block-tools gx-2">
                            <li>
                                <a href="#" class="search-toggle toggle-search btn btn-icon btn-trigger" data-target="search"><em class="icon ni ni-search"></em></a>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <a href="#" class="btn btn-trigger btn-icon dropdown-toggle" data-toggle="dropdown">
                                        <div class="dot dot-primary"></div>
                                        <em class="icon ni ni-filter-alt"></em>
                                    </a>

                                    <div class="filter-wg dropdown-menu dropdown-menu-lg dropdown-menu-right">
                                        <div class="dropdown-head">
                                            <span class="sub-title dropdown-title">Filter Transaction</span>
                                        </div>
                                        <form action="https://app.investorm.xyz/transactions" method="GET">
                                            <input type="hidden" name="filter" value="true" />
                                            <div class="dropdown-body dropdown-body-rg">
                                                <div class="row gx-6 gy-3">
                                                    <div class="col-6">
                                                        <div class="form-group">
                                                            <label class="overline-title overline-title-alt">Type</label>
                                                            <select name="type" class="form-select form-select-sm select2-hidden-accessible" data-select2-id="1" tabindex="-1" aria-hidden="true">
                                                                <option value="any" data-select2-id="3">Any Type</option>
                                                                <option value="bonus">Bonus</option>
                                                                <option value="charge">Charge</option>
                                                                <option value="deposit">Deposit</option>
                                                                <option value="withdraw">Withdraw</option>
                                                                <option value="investment">Investment</option>
                                                                <option value="referral">Referral</option>
                                                                <option value="transfer">Transfer</option>
                                                            </select>
                                                            <span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="2" style="width: auto;">
                                                                <span class="selection">
                                                                    <span
                                                                        class="select2-selection select2-selection--single"
                                                                        role="combobox"
                                                                        aria-haspopup="true"
                                                                        aria-expanded="false"
                                                                        tabindex="0"
                                                                        aria-disabled="false"
                                                                        aria-labelledby="select2-type-ba-container"
                                                                    >
                                                                        <span class="select2-selection__rendered" id="select2-type-ba-container" role="textbox" aria-readonly="true" title="Any Type">Any Type</span>
                                                                        <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
                                                                    </span>
                                                                </span>
                                                                <span class="dropdown-wrapper" aria-hidden="true"></span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="form-group">
                                                            <label class="overline-title overline-title-alt">Status</label>
                                                            <select name="status" class="form-select form-select-sm select2-hidden-accessible" data-select2-id="4" tabindex="-1" aria-hidden="true">
                                                                <option value="any" data-select2-id="6">Any Status</option>
                                                                <option value="cancelled">Cancelled</option>
                                                                <option value="failed">Failed</option>
                                                                <option value="completed">Completed</option>
                                                            </select>
                                                            <span class="select2 select2-container select2-container--default" dir="ltr" data-select2-id="5" style="width: auto;">
                                                                <span class="selection">
                                                                    <span
                                                                        class="select2-selection select2-selection--single"
                                                                        role="combobox"
                                                                        aria-haspopup="true"
                                                                        aria-expanded="false"
                                                                        tabindex="0"
                                                                        aria-disabled="false"
                                                                        aria-labelledby="select2-status-ei-container"
                                                                    >
                                                                        <span class="select2-selection__rendered" id="select2-status-ei-container" role="textbox" aria-readonly="true" title="Any Status">Any Status</span>
                                                                        <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
                                                                    </span>
                                                                </span>
                                                                <span class="dropdown-wrapper" aria-hidden="true"></span>
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="form-group">
                                                            <label class="overline-title overline-title-alt">From</label>
                                                            <input class="form-control date-picker" name="date[from]" type="text" value="" />
                                                        </div>
                                                    </div>

                                                    <div class="col-6">
                                                        <div class="form-group">
                                                            <label class="overline-title overline-title-alt">To</label>
                                                            <input class="form-control date-picker" name="date[to]" type="text" value="" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dropdown-foot between">
                                                <button type="submit" class="btn btn-secondary">Filter</button>
                                                <a href="https://app.investorm.xyz/transactions" class="clickable">Reset Filter</a>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="dropdown">
                                    <a class="dropdown-toggle btn btn-icon btn-trigger mr-n1" data-toggle="dropdown" data-offset="-8,0"><em class="icon ni ni-setting"></em></a>
                                    <div class="dropdown-menu dropdown-menu-xs dropdown-menu-right">
                                        <ul class="link-check">
                                            <li><span>Show</span></li>
                                            <li class="update-meta">
                                                <a href="#" data-value="10" data-meta="perpage" data-type="tnx">10</a>
                                            </li>
                                            <li class="update-meta active">
                                                <a href="#" data-value="20" data-meta="perpage" data-type="tnx">20</a>
                                            </li>
                                            <li class="update-meta">
                                                <a href="#" data-value="50" data-meta="perpage" data-type="tnx">50</a>
                                            </li>
                                        </ul>
                                        <ul class="link-check">
                                            <li><span>Density</span></li>
                                            <li class="update-meta active">
                                                <a href="#" data-value="regular" data-meta="display" data-type="tnx">Regular</a>
                                            </li>
                                            <li class="update-meta">
                                                <a href="#" data-value="compact" data-meta="display" data-type="tnx">Compact</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <form action="https://app.investorm.xyz/transactions" method="GET">
                        <div class="search-wrap search-wrap-extend bg-lighter" data-search="search">
                            <div class="search-content">
                                <a href="#" class="search-back btn btn-icon toggle-search" data-target="search"><em class="icon ni ni-arrow-left"></em></a>
                                <input type="text" name="query" class="form-control border-transparent form-focus-none" placeholder="Search by transaction id" />
                                <button class="search-submit btn btn-icon mr-1"><em class="icon ni ni-search"></em></button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="nk-odr-list is-stretch card card-bordered">
                     @if(!blank($trans))
                    @if($type == 'deposit')
                    @foreach($trans as $tran)
                     @include('template.coin.user.funds.trans-deposit')
                      @endforeach
                    @elseif($type == 'withdraw')
                   
                    @include('template.coin.user.funds.trans-withdraw')
                    
                    
                    @else
                    
                     @include('template.coin.user.funds.trans-row')
                    
                    @endif
                                        
                                        @else
                                      none  
                                        @endif
                </div>
              
                <div class="mt-4"></div>
            </div>
            
            
        </div>
    </div>
</div>

@endsection

@section('modals')
<div class="modal fade" role="dialog" id="ajax-modal"></div>
@endsection

@section('js')
<script>
    $(function(){
       
        $('.tnx-details').on('click', function(){
            var id = $(this).attr('data-tnx');
            var type = $(this).attr('data-type');
            
            var url = "{{secure_url('details')}}/"+type+'/'+id
           
            $.ajax({
                url: url ,
                type: "GET",
                dataType: "json",
                
                success: function(res){
                    if(res.status == true){
                    $('#ajax-modal').html(res.view)   
                    $('#ajax-modal').modal('show');
                    }
                }
            })
        })
    })
</script>
@endsection