@extends('admin.template')

@section('title')
    <title>Admin Deposits</title>
@endsection
@section('active-link')
    Admin-Deposits
@endsection
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
@section('content')
    <div class="content-wrapper">
        {{--<div class="row">
            <div class="col-md-12 grid-margin">
                <div class="d-flex justify-content-between flex-wrap">
                    <div class="d-flex align-items-end flex-wrap">
                        <div class="me-md-3 me-xl-5">
                            <h2>Admin Deposits</h2>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-end flex-wrap">
                        <div class="d-flex">
                            <i class="mdi mdi-home text-muted hover-cursor"></i>
                            <p class="text-muted mb-0 hover-cursor">&nbsp;/&nbsp;<a href="{{url('/dashboard')}}">Dashboard&nbsp;</a>/&nbsp;</p>
                            <p class="text-primary mb-0 hover-cursor">Admin Deposits</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>--}}

        @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">Deposits 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 scope="col">Id</th>
                                <th scope="col">Unique ID</th>
                                <th scope="col">Customer Name</th>
                                <th scope="col">Deposit Amount</th>
                                <th scope="col">Currency</th>
                                <th scope="col">Rate</th>
                                <th scope="col">Total Amount</th>
                                <th scope="col">Network</th>
                                <th scope="col">Status</th>
{{--                                <th scope="col">Image</th>--}}
                                <th scope="col">Date</th>
                                <th scope="col">Action</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-grow-1"></div>

    </div>

    <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>

@endsection('content')

@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') }
        });

        // DataTable
        $('#zero_configuration_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{route('all_deposits_ajax')}}",
            columns: [
                { data: 'sno' },
                { data: 'unique_id' },
                { data: 'name'
                    // ,
                    // 'render': function(data, type, full) {
                    //     return `<a href="/dashboard/`+ full.user_id +`" >`+data+`</a>`;
                    // }
                },
                { data: 'amount'},
                { data: 'currency'},
                { data: 'currency_rate'},
                { data: 'total_amount'},
                { data: 'network'},
                { data: 'status',
                    'render': function(data, type, full) {
                        if(data == "Pending"){
                            return `<span id="span_`+ full.id +`" class="badge bg-warning badge-pill">`+data+`</span>`;
                        } else if(data == "Processing"){
                            return `<span id="span_`+ full.id +`" class="badge bg-info badge-pill">`+data+`</span>`;
                        }else if(data == "Approved"){
                            return `<span id="span_`+ full.id +`" class="badge bg-success badge-pill">`+data+`</span>`;
                        }else if(data == "Rejected"){
                            return `<span id="span_`+ full.id +`" class="badge bg-danger badge-pill">`+data+`</span>`;
                        }else{
                            return `<span id="span_`+ full.id +`" class="badge bg-dark badge-pill">`+data+`</span>`;
                        }
                    }
                },
                // { data: 'proof_image',
                //     'render': function(data, type, full, meta) {
                //         return '<img src="../'+ full.proof_image +'" height="50" width="50"/>';
                //     }
                // },

                { data: 'date'},
                { data: 'action',
                    'render': function(data, type, full) {
                        if(full.status == "Pending"){
                            return `<select id="status_`+ full.id +`" class="status" onchange="change_status(`+ full.id +`)">
                            <option selected="selected" value="Pending">Pending</option>
                            <option value="Approved">Approved</option>
                            <option value="Processing">Processing</option>
                            <option value="Rejected">Rejected</option>
                            </select>`;
                        }
                        else if(full.status == "Processing"){
                            return `<select id="status_`+ full.id +`" class="status" onchange="change_status(`+ full.id +`)">
                            <option selected="selected" value="Processing">Processing</option>
                            <option value="Approved">Approved</option>
                            <option value="Rejected">Rejected</option>
                            </select>`;
                        }
                        else if(full.status == "Approved"){
                            return `<span id="span_`+ full.id +`" class="badge bg-success ">`+full.status+`</span>`;
                        }else if(full.status == "Rejected"){
                            return `<span id="span_`+ full.id +`" class="badge bg-danger ">`+full.status+`</span>`;
                        }

                    }
                },

            ]
        });

    });

    function change_status(id) {

        status = document.getElementById("status_"+id).value;
        $.ajax({
            type:'POST',
            url:'{{ route('change_deposit_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('badge-warning');
                        $("#span_"+id).removeClass('badge-info');
                        $("#span_"+id).removeClass('badge-danger');
                        $("#span_"+id).removeClass('badge-success');
                    }
                    if (status == 'Processing'){
                        $("#span_"+id).addClass('badge-info');
                        $("#span_"+id).removeClass('badge-warning');
                        $("#span_"+id).removeClass('badge-danger');
                        $("#span_"+id).removeClass('badge-success');
                    }
                    if(status == 'Approved'){
                        $("#span_"+id).addClass('badge-success');
                        $("#span_"+id).removeClass('badge-info');
                        $("#span_"+id).removeClass('badge-danger');
                        $("#span_"+id).removeClass('badge-warning');
                    }
                    if(status == 'Rejected'){
                        $("#span_"+id).addClass('badge-danger');
                        $("#span_"+id).removeClass('badge-info');
                        $("#span_"+id).removeClass('badge-warning');
                        $("#span_"+id).removeClass('badge-success');
                    }

                    $('#span_'+id).html('');
                    $('#span_'+id).html(status);
                    location.reload();
                },
                complete:function(data){
                    // Hide image container
                    $("#loader").hide();
                }
        });
    }

</script>

@endsection