@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 - {{ ucfirst($status) }} {{ ucfirst($type) }} all list</h3>
            </div>
        </div>

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

        <!-- Filters -->
        <div class="row mb-3">
            @if($status == '' && $type == '')
            <div class="col">
                <select class="form-control bn-select-option" name="type" id="selectType">
                    <option value="">All Type</option>
                    {!! get_transaction_type_select() !!}
                </select>
            </div>
            <div class="col">
                <select class="form-control bn-select-option" name="status" 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>
            @else
                <input type="hidden" id="selectStatus" value="{{$status}}" />
                <input type="hidden" id="selectType" value="{{$type}}" />
            @endif
        </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>Coin</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 table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('admin.transaction.list.all') }}",
            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