@extends('admin.template')
@section('title')
    <title>Admin-Withdrawals</title>
@endsection
@section('active-link')
    Admin-Withdrawals
@endsection
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
@section('content')
    <div class="content-wrapper">

        @if ($message = Session::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif

        @if ($message = Session::get('error'))
            <div class="alert alert-danger alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif

        <div class="row">
            <div class="col-12">
                <div class="card my-4">
                    <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                        <div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3 d-flex justify-content-between align-items-center">
                            <h6 class="text-white text-capitalize ps-3 mb-0">Withdrawals List</h6>
                            {{--                            <a class="btn btn-xs btn-primary me-3" href="">Add New </a>--}}
                        </div>
                    </div>
                    <div class="card-body px-0 pb-2">
                        <div class="table-responsive p-0">
                            <table id="zero_configuration_table" class="table align-items-center mb-0">

                            <thead>
                            <tr>

                                <th>id</th>
                                <th>Name</th>
                                <th>Amount</th>
                                <th>Fee</th>
                                <th>Total</th>
                                <th>Currency</th>
                                <th>Type</th>
                                <th>Network</th>
                                <th>Status</th>
                                <th>Address</th>
                                <th>Date</th>
                                <th>Action</th>

                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-grow-1"></div>
    </div>


    </div>

<!-- Image loader -->
    <div id='loader' style='display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%;'>
        <img src="{{ asset('assets/img/loader.gif') }}" width='100' height='100'>
    </div>
{{--</div>--}}
<!-- Image loader -->
@endsection

@section('js')
 <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">

    $(document).ready(function() {
        $.ajaxSetup({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });

        $('#zero_configuration_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('all_withdrawals_ajax') }}",
            columns: [
                { data: 'sno' },
                { data: 'name' },
                { data: 'amount' },
                { data: 'fee' },
                { data: 'total_amount' },
                { data: 'currency' },
                { data: 'withdraw_type'},
                { data: 'network' },
                {
                    data: 'status',
                    render: function(data, type, full) {
                        let badgeClass = {
                            "Pending": "bg-warning",
                            "Approved": "bg-primary",
                            "Verified": "bg-info",
                            "Deposited": "bg-success",
                            "Rejected": "bg-danger"
                        };
                        return `<span class="badge ${badgeClass[data] || 'bg-default'} badge-pill">${data}</span>`;
                    }
                },
                { data: 'withdraw_address' },
                { data: 'date' },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ]
        });
        //class="badge bg-warning badge-pill"
    });

    function change_status(id) {
        status = document.getElementById("status_"+id).value;
        $.ajax({
            type:'POST',
            url:'{{ route('change_withdraw_status') }}',
            data:{status:status, id:id , _token: '{{csrf_token()}}' },
                beforeSend: function(){
                    // Show image container
                    $("#loader").show();
                    $("#loader").css("display","flex");
                },
                success:function(data) {
                    //$("#msg").html(data.msg);
                    alert('Status Update Successfully');
                    if (status == 'Pending') {
                        $("#span_"+id).addClass('bg-warning');
                        $("#span_"+id).removeClass('bg-info');
                        $("#span_"+id).removeClass('bg-danger');
                        $("#span_"+id).removeClass('bg-primary');
                        $("#span_"+id).removeClass('bg-success');
                    }
                    if(status == 'Approved'){
                        $("#span_"+id).addClass('bg-primary');
                        $("#span_"+id).removeClass('bg-info');
                        $("#span_"+id).removeClass('bg-danger');
                        $("#span_"+id).removeClass('bg-warning');
                        $("#span_"+id).removeClass('bg-success');
                    }
                    if (status == 'Verified'){
                        $("#span_"+id).addClass('bg-info');
                        $("#span_"+id).removeClass('bg-warning');
                        $("#span_"+id).removeClass('bg-danger');
                        $("#span_"+id).removeClass('bg-primary');
                        $("#span_"+id).removeClass('bg-success');
                    }
                    if(status == 'Deposited'){
                        $("#span_"+id).addClass('bg-success');
                        $("#span_"+id).removeClass('bg-info');
                        $("#span_"+id).removeClass('bg-success');
                        $("#span_"+id).removeClass('bg-danger');
                        $("#span_"+id).removeClass('bg-warning');
                    }
                    if(status == 'Rejected'){
                        $("#span_"+id).addClass('bg-danger');
                        $("#span_"+id).removeClass('bg-info');
                        $("#span_"+id).removeClass('bg-warning');
                        $("#span_"+id).removeClass('bg-primary');
                        $("#span_"+id).removeClass('bg-success');
                    }
                    $('#span_'+id).html('');
                    $('#span_'+id).html(status);
                    // location.reload();
                },
                complete:function(data){
                    // Hide image container
                    $("#loader").hide();
                }
        });
    }
</script>
@endsection