@extends('index')
@section('title', Helper::getSiteTitle('Wallet'))

@section('content')
@php
$worker_ids = $workers_osrs_balance = [];
@endphp
<main class="dashboardMain">
	@include('includes.dashboard-nav')
    <div class="dashboard-row">
        <div class="dashboard-content">
            <div class="dash-workers">
                <div class="single-worker" style="width: 48%;">
                    <span>OSRS</span>
                    <h5>{{ Helper::displayFullValue($osrs_balance) }} GP</h5>
                    @if(!empty($pending_payout_balance))
                    <p style="margin-bottom:0px;">Pending: {{ Helper::displayFullValue($pending_payout_balance) }}</p>
                    @endif
                    @if(!empty(Helper::getUserOSRSBalance(auth()->user())))
                    <a href="javascript:void(0)" class="btn btn-primary create-payout-button"><span class="fad fa-plus fa-3x" style="font-size:16px; margin-right: 10px;"></span><span style="font-size:16px;">PAYOUT</span></a>
                    @endif
                </div>
                <div class="single-worker" style="width: 48%;">
                    <span>Coming Soon..</span>
                    <i class="fas fa-comments-dollar" aria-hidden="true"></i>
                    <a href="javascript:void(Tawk_API.toggle())" class="btn btn-primary">Suggest A Game</a>
                </div>
            </div>
            <div class="table-wrap" style="margin-top:40px;">
                <h4 class="table-title">Open Requests</h4>
                <table>
                    <thead>
                        <tr>
                            <th>Currency</th>
                            <th>Total</th>
                            <th>Time</th>
                            <th>Date</th>
                            <th>Status</th>
                            <th>TXID</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(!$pending_payouts->isEmpty())
                            @foreach($pending_payouts as $payout)
                                <tr>
                                    <td>OSRS</td>
                                    <td>{{ Helper::displayFullValue($payout->osrs_balance) }} GP</td>
                                    <td>{{ \Carbon\Carbon::parse($payout->created_at)->timezone(auth()->user()->time_zone)->format('h:i:s A') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($payout->created_at)->timezone(auth()->user()->time_zone)->format('d F, Y') }}</td>
                                    <td><span class="active-status">OPEN</span></td>
                                    <td style="text-transform: uppercase; font-weight: bold;">{{ $payout->transaction_id }}</td>
                                </tr>
                            @endforeach
                        @else
                        <tr>
                            <td colspan="6">No payout found</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
            <div class="table-wrap" style="margin-top:40px;">
                <h4 class="table-title">Payout History</h4>
                <table>
                    <thead>
                        <tr>
                            <th>Currency</th>
                            <th>Total</th>
                            <th>Time</th>
                            <th>Date</th>
                            <th>Status</th>
                            <th>TXID</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(!$payout_history->isEmpty())
                            @foreach($payout_history as $payout)
                                <tr>
                                    <td>OSRS</td>
                                    <td>{{ Helper::displayFullValue($payout->osrs_balance) }} GP</td>
                                    <td>{{ \Carbon\Carbon::parse($payout->created_at)->timezone(auth()->user()->time_zone)->format('h:i:s A') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($payout->created_at)->timezone(auth()->user()->time_zone)->format('d F, Y') }}</td>
                                    <td>
                                        @if($payout->status == 0)
                                        <span class="active-status">OPEN</span>
                                        @elseif($payout->status == 1)
                                        <span class="active-status">APPROVED</span>
                                        @else
                                        <span class="active-status active-status-off">CANCELLED</span>
                                        @endif
                                    </td>
                                    <td style="text-transform: uppercase; font-weight: bold;">{{ $payout->transaction_id }}</td>
                                </tr>
                            @endforeach
                        @else
                        <tr>
                            <td colspan="6">No payout found</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</main>
@if(!empty(Helper::getUserOSRSBalance(auth()->user())))
<div class="modal fade" id="createPayout" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Create Payout</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{ route('create-payout') }}" class="register-form submit-payout-form" method="post">
                    @csrf
                    <div class="row">
                        @include('includes.messages-db')
                    </div>
                    <div class="row">
                        <table class="table">
                            <tbody>
                                <tr>
                                    <td><strong>Currency</strong></td>
                                    <td>OSRS</td>
                                </tr>
                                <tr>
                                    <td><strong>Amount</strong></td>
                                    <td>{{ Helper::displayFullValue($osrs_balance) }} GP</td>
                                </tr>
                            </tbody>
                        </table>
                        <p class="text-danger text-center" style="font-style: italic; font-size:13px;"><strong>Please be aware that payouts may be delayed depending on volume</strong></p>
                        <div class="col-sm-12">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" placeholder="In-Game Character Name" id="character_name" name="character_name" />
                            </div>
                        </div>
                        <div class="col-sm-12 verification-code {{ empty($verification) ? 'd-none' : '' }}">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" placeholder="Enter verification code" id="code" name="code" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary submit-payout-form-button">Submit</button>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@section('js-lib')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
@endsection

@section('js')
<script>
$(document).ready(function(){

    if ($("#chart").length)
    {
        var options = {
            responsive: true,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Open Payouts'
                }
            }
        };

        data = {
            labels: ['Jan', 'Feb', 'March', 'Apr', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [
                {
                    label: 'Payouts',
                    data: [23,54,65,6,7,2],
                    backgroundColor: "rgba(255,99,132,0.2)",
                    borderColor: "rgba(255,99,132,1)",
                }
            ]
        };

        new Chart('chart', {
            type: 'line',
            options: options,
            data: data
        });
    }
});
</script>
@endsection