@extends('layouts.simple.master')

@section('title', 'Default')

@section('css')

@endsection

@section('style')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/datatables.css') }}">
@endsection

@section('breadcrumb-title')
<h3>All Transactions</h3>
@endsection

@section('breadcrumb-items')
<li class="breadcrumb-item">All Transactions</li>
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-xxl-12 col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-10">
                            <ul class="nav nav-tabs nav-primary" id="pills-warningtab" role="tablist">
                                <li class="nav-item"><a class="nav-link active" data-bs-toggle="pill" onclick="show_tbl('')" href="#" role="tab" aria-controls="pills-warninghome" aria-selected="true" data-bs-original-title="" title="">All Transaction</a></li>
                                <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#" onclick="show_tbl(1)" role="tab" aria-controls="pills-warninghome" aria-selected="true" data-bs-original-title="" title="">Deposit</a></li>
                                <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#" onclick="show_tbl(2)" role="tab" aria-controls="pills-warninghome" aria-selected="true" data-bs-original-title="" title="">Withdraw</a></li>
                                <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#" onclick="show_tbl(4)" role="tab" aria-controls="pills-warninghome" aria-selected="true" data-bs-original-title="" title="">Internal Transfer</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-content" id="pills-warningtabContent">
                        <div class="table-responsive pt-5">
                            <table class="table table-hover tabel-border-secondary" id="basic-1">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Client Name</th>
                                        <th>Client Email</th>
                                        <th>Amount</th>
                                        <th>Request Type</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if (!empty($data))
                                    @foreach($data as $row)
                                    <tr
                                        @if($row->status == 1)
                                        data-status="processing"
                                        @elseif($row->status == 2)
                                        data-status="pending"
                                        @elseif($row->status == 3)
                                        data-status="approved"
                                        @elseif($row->status == 4)
                                        data-status="rejected"
                                        @endif
                                        @if(!empty($row->gateway_type))
                                        data-type="{{$row->request_type}}"
                                        @else
                                        data-type="3"
                                        @endif
                                        >
                                        <td style="display: flex;">
                                            <span>
                                                <img src="{{ asset('assets/meta_trader_5.jpg') }}" height="60" width="100" class="m-r-10" style="border:1px solid black; float:left">
                                            </span>
                                            <span>
                                                <span style="display: flex;">
                                                    <span>{{$row->wallet_no}}</span>
                                                </span>
                                                <span style="display: flex;">
                                                    <span>cTraders</span>
                                                </span>
                                            </span>
                                        </td>
                                        <td>{{$row->user_fname ." ". $row->user_lname}}</td>
                                        <td>{{$row->user_email}}</td>
                                        <td>{{$row->amount}}</td>
                                        <td>
                                            @if($row->request_type == 1)
                                            Deposit
                                            @elseif($row->request_type == 2)
                                            Withdraw
                                            @endif
                                        </td>
                                        <td>
                                            @if($row->status == 1)
                                            <span class="badge" style="background-color:#607d8b">Processing</span>
                                            @elseif($row->status == 2)
                                            <span class="badge badge-warning">Pending</span>
                                            @elseif($row->status == 3)
                                            <span class="badge badge-success">Approve</span>
                                            @elseif($row->status == 4)
                                            <span class="badge badge-danger">Denied</span>
                                            @endif
                                        </td>
                                        <td>
                                            <button type="button" data-bs-toggle="modal" data-bs-target="#transaction_info_{{$row->id}}" class="btn btn-custom btn-dark" style="padding-top:6px !important;padding-bottom:6px !important; padding-right:28px !important; padding-left:28px !important"><span class="fa fa-eye"></span></button>
                                        </td>
                                    </tr>
                                    @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if (!empty($data))
@foreach($data as $row)
<div class="modal fade" id="transaction_info_{{$row->id}}" tabindex="-1" role="dialog" aria-labelledby="transaction_infoLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="transaction_infoLabel">Transaction Information</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 col-6"><b>Request Type :</b></div>
                    <div class="col-md-6 col-6"> @if($row->request_type == 1)
                        Deposit
                        @elseif($row->request_type == 2)
                        Withdraw
                        @endif
                    </div>
                    <div class="col-md-6 col-6 m-t-10"><b>Gateway Type :</b></div>
                    <div class="col-md-6 col-6 m-t-10">{{ $row->entity_title }}</div>
                    <div class="col-md-6 col-6 m-t-10"><b>Amount :</b></div>
                    <div class="col-md-6 col-6 m-t-10">{{ $row->amount }}</div>
                    <div class="col-md-6 col-6 m-t-10"><b>Initiated at :</b></div>
                    <div class="col-md-6 col-6 m-t-10">{{ $row->created_at }}</div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">Close</button>
                <!-- <button class="btn btn-primary" type="button" data-bs-dismiss="modal" data-bs-original-title="" title="">Download Receipt</button> -->
            </div>
        </div>
    </div>
</div>
@endforeach
@endif
@endsection

@section('script')
<script src="{{ asset('assets/js/datatable/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/datatable/datatables/datatable.custom.js') }}"></script>
<script>
    var user_id = "{{ Auth::guard('client')->user()->id }}";
    $(document).ready(function() {
        $.ajax({
            url: "{{ route('notifications.read') }}",
            type: 'GET',
            data: {
                user_id: user_id,
                type: "App\\Notifications\\UpdatePaymentRequest",
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {}
        });
        $.ajax({
            url: "{{ route('notifications.read') }}",
            type: 'GET',
            data: {
                user_id: user_id,
                type: "App\\Notifications\\NewPaymentRequest",
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {}
        });
    })

    function show_tbl(obj) {
        var table = $('.dataTable').DataTable();
        $.fn.dataTable.ext.search = [];
        if (obj) {
            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                console.log('Row index:', dataIndex);
                var dataType = $(table.row(dataIndex).node()).attr('data-type');

                if (dataType == obj) {
                    return true;
                }
                return false;
            });
        }

        table.draw();
    }
</script>
@endsection