@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>Payment Requests</h3>
@endsection

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

@section('content')
<style>
    @media only screen and (max-width: 600px) {
        .dis_f_col {
            flex-direction: column;
        }
    }
</style>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 col-12">
            <div class="card">
                <div class="card-header card-no-border pt-2">
                    <div class="header-top">
                        <h5 class="m-t-30">Payment Requests</h5>
                        <p class="f-right m-t-10" id="monibtn" style="display: none;">Monitoring:
                            <span class="fa
                            @if (isset($monitioring->monitioring) && $monitioring->monitioring == 1)
                            fa-toggle-on font-success
                            @else
                            fa-toggle-off font-danger
                            @endif 
                             f-right m-l-20" onclick="change_icon(this)" style="font-size: xx-large;padding-bottom: 0px;bottom: 4px;position: relative;"></span>
                        </p>
                    </div>
                    @if (session('error'))
                    <div class="row">

                        <div class="alert alert-danger dark alert-dismissible fade show">
                            <i class="icon-alert"></i>
                            <b> {{ session('error') }}</b>
                            <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close" data-bs-original-title="" title=""></button>
                        </div>
                    </div>
                    @endif
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8 col-12">
                                <ul class="nav nav-tabs nav-primary dis_f_col" id="pills-warningtab" role="tablist" style="display: flex">
                                    <li class="nav-item"><a class="nav-link active" id="pills-warningContent-tab" data-bs-toggle="pill" href="#" data-id="pills-warningtabContent" role="tab" aria-controls="pills-warninghome" aria-selected="true" data-bs-original-title="" title="" onclick="show_tbl('')">All Requests</a></li>
                                    <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#" role="tab" aria-controls="deposit" aria-selected="false" data-bs-original-title="" title="" onclick="show_tbl(1)">Deposit</a></li>
                                    <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#" role="tab" aria-controls="withdraw" aria-selected="false" data-bs-original-title="" title="" onclick="show_tbl(2)">Withdraw</a></li>
                                    <li class="nav-item"><a class="nav-link" data-bs-toggle="pill" href="#" role="tab" aria-controls="withdraw" aria-selected="false" data-bs-original-title="" title="" onclick="show_tbl(3)">Payment Agents</a></li>
                                </ul>
                            </div>
                            <div class="col-md-4 col-12">
                                <select class="form-control" id="statusFilter" onchange="show_records(this)">
                                    <option value="">All Request</option>
                                    <option value="processing">Processing</option>
                                    <option value="pending">Pending</option>
                                    <option value="approved">Approved</option>
                                    <option value="denied">Denied</option>
                                </select>
                            </div>
                        </div>
                        <div class="tab-content" id="pills-warningtabContent">
                            <div class="table-responsive pt-5">
                                <table class="table table-hover tabel-border-secondary dataTable">
                                    <thead>
                                        <tr>
                                            <th style="display:none"></th>
                                            <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:none"></td>
                                            <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 style="width:8%" class="dropdown-basic">
                                                <div style="display: flex;">
                                                    <div>
                                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#edit_modal_{{$row->id}}"><span class="fa fa-edit"></span></button>
                                                    </div>
                                                </div>
                                            </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="edit_modal_{{$row->id}}" tabindex="-1" role="dialog" aria-labelledby="upload_fileLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="upload_fileLabel">Update</h5>
                    <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close" data-bs-original-title="" title=""></button>
                </div>
                <form action="{{ route('update.request') }}" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col">
                                <div class="mb-3 row">
                                    <label class="col-sm-3 col-form-label">Status</label>
                                    <div class="col-sm-9">
                                        <input type="hidden" name="user_id" value="{{$row->user_id}}">
                                        <input type="hidden" name="id" value="{{$row->id}}">
                                        <select name="status" id="" class="form-control">
                                            <option value="1" @if ($row->status == 1)
                                                selected
                                                @endif
                                                >Processing</option>
                                            <option value="2"
                                                @if ($row->status == 2)
                                                selected
                                                @endif
                                                >Pending</option>
                                            <option value="3"
                                                @if ($row->status == 3)
                                                selected
                                                @endif
                                                >Approved</option>
                                            <option value="4"
                                                @if ($row->status == 4)
                                                selected
                                                @endif
                                                >Denied</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="mb-3 row">
                                    <label class="col-sm-3 col-form-label">Payment Method</label>
                                    <div class="col-sm-9 mb-3">
                                        @if (empty($row->entity_title) )
                                        Payment Agent
                                        @else
                                        {{ $row->entity_title }}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="mb-3 row">
                                    <label class="col-sm-3 col-form-label">Amount</label>
                                    <div class="col-sm-9 mb-3">
                                        {{ $row->amount }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if (!empty($row->meta_data))
                        @php
                        $meta = json_decode($row->meta_data)
                        @endphp
                        @foreach ($meta as $key => $value)
                        <div class="row">
                            <div class="col">
                                <div class="mb-3 row">
                                    <label class="col-sm-3 col-form-label">{{ Str::title(str_replace('_', ' ', $key)) }}</label>
                                    <div class="col-sm-9">
                                        {{$value}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </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="submit">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endforeach
    @endif
    <script type="text/javascript">
        function show_tbl(obj) {
            var table = $('.dataTable').DataTable();
            $.fn.dataTable.ext.search = [];
            if(obj == 3){
                $('#monibtn').show();
            }else{
                $('#monibtn').hide();
            }
            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();
        }

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

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

            table.draw();
        }
    </script>
    @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('admin')->user()->id }}";
        $(document).ready(function() {
            $('.dataTable').dataTable()
            $.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 change_icon(obj) {
            var active = 0;
            if ($(obj).hasClass('fa-toggle-on')) {
                active = 0;
            } else {
                active = 1;
            }
            $.ajax({
                url: "{{ route('monitioring.request') }}",
                type: 'POST',
                data: {
                    active: active,
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if ($(obj).hasClass('fa-toggle-on')) {
                        $(obj).removeClass('fa-toggle-on')
                        $(obj).addClass('fa-toggle-off')
                        $(obj).removeClass('font-success')
                        $(obj).addClass('font-danger');
                    } else {
                        $(obj).removeClass('fa-toggle-off')
                        $(obj).addClass('fa-toggle-on')
                        $(obj).removeClass('font-danger')
                        $(obj).addClass('font-success');
                    }

                }
            });
        }
    </script>
    @endsection