@extends('layouts.admin')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
@endsection

@section('content')
<main class="content">
    <div class="container-fluid p-0">

        <div class="row mb-2 mb-xl-3">
            <div class="col-auto d-none d-sm-block">
                <h3>
                    TRANSACTIONS / LIST 
                    @if(!blank($client)) ({{ $client->email }}) @endif
                </h3>

                @if(!blank($client))
                <p><a href="{{ route('admin.user.single', $client->username) }}">Back to User Page</a></p>
                @endif
            </div>
        </div>

        @include('components.admin.error-message')

        <!-- Filters -->
        <div class="row mb-3">
            @if($type == '')
            <div class="col">
                <select class="form-control bn-select-option" id="selectType">
                    <option value="">All Type</option>
                    {!! get_transaction_type_select() !!}
                </select>
            </div>
            @else
                <input type="hidden" id="selectType" value="{{$type}}" />
            @endif
            <div class="col">
                <select class="form-control bn-select-option" id="selectStatus">
                    <option value="">All Status</option>
                    {!! get_transaction_status_select() !!}
                </select>
            </div>
            <div class="col">
                <button id="history-crypto-reset-button" class="btn btn-sm btn-primary">Reset</button>
            </div>
        </div>

        <!-- Transactions Table -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-body tableRes">
                        <table class="table table-responsive table-striped data-table" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Time</th>
                                    <th>Reference</th>
                                    <th>Type</th>
                                    <th>Method</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</main>

<!-- Edit Modal -->
<div class="modal fade" id="processModalMd" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md" role="document" id="transactionModalContent"></div>
</div>
@endsection

@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

<script>
var editModal = new bootstrap.Modal(document.getElementById('processModalMd'));

$(function () {
    var clientId = {{ $client->id }};
    
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('admin.transaction.list', '') }}/" + clientId,
            data: function (d) {
                d.type = $('#selectType').val();
                d.stats = $('#selectStatus').val();
            }
        },
        columns: [
            { data: 'created_date', name: 'created_date', searchable: false },
            { data: 'transaction_id', name: 'transaction_id', orderable: false },
            { data: 'type', name: 'type', orderable: false, searchable: false },
            { data: 'method', name: 'method', orderable: false, searchable: false },
            { data: 'amount', name: 'amount', searchable: false },
            { data: 'status', name: 'status', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ]
    });

    $(".bn-select-option").on('change', function(){
        table.draw();
    });

    $("#history-crypto-reset-button").on('click', function(){
        $('#selectType').val("");
        $('#selectStatus').val("");
        table.search('').draw();
    });

    // Open Edit Modal
    $('body').on('click', '.edit_data', function(){
        let txnID = $(this).data("name");
        let url = "{{ route('admin.transaction.single', '') }}/" + txnID;

        $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            success: function(res){
                if(res.status){
                    $("#transactionModalContent").html(res.view);
                    editModal.show();
                }
            }
        });
    });

    // Delete Transaction
    $('body').on('click', '.delete_data', function(){
        let url = $(this).data('url');
        let name = $(this).data('name');

        if(confirm(`Are you sure you want to delete ${name}?`)){
            window.location.href = url;
        }
    });

});
</script>
@endsection