@extends('layouts.user')

@section('title', 'Profits')

@section('content')
    <div class="nk-content ">
        <div class="container-fluid">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="components-preview wide-md mx-auto">
                        <div class="nk-block-head nk-block-head-lg wide-sm">
                            <div class="nk-block-head-content">
                                <div class="nk-block-head-sub"><a class="back-to" href="{{ route('account') }}"><em class="icon ni ni-arrow-left"></em><span>Dashboard</span></a></div>
                                <h2 class="nk-block-title fw-normal">Interest</h2>
                                <div class="nk-block-des">
                                    <p class="lead"></p>
                                </div>
                            </div>
                        </div><!-- .nk-block -->
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-5">
                                    <table class="datatable-init table" id="example1">
                                        <thead>
                                        <tr>
                                            <th>Invoice</th>
                                            <th>Type</th>
                                            <th>Method</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Date</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(count($payouts) <= 0 )
                                            <tr>
                                                <td>
                                                    <span>You've not yet made any profit</span>
                                                </td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        @else
                                            @foreach($payouts as $payout)
                                                <tr>
                                                    <td>{{ $payout['invoice'] }}</td>
                                                    <td>{{ $payout['type'] }}</td>
                                                    <td>{{ $payout['currency'] }}</td>
                                                    <td>${{ number_format($payout['amount'], 2) }}</td>
                                                    <td>
                                                        @if($payout['status'] == \App\Constants::PENDING)
                                                            <button class="btn btn-sm btn-warning">active</button>
                                                        @endif
                                                        @if($payout['status'] == \App\Constants::SUCCESS)
                                                            <button class="btn btn-sm btn-success">completed</button>
                                                        @endif
                                                        @if($payout['status'] == \App\Constants::FAILED)
                                                            <button class="btn btn-sm btn-danger">cancelled</button>
                                                        @endif
                                                    </td>
                                                    <td>{{ $payout['created_at'] }}</td>
                                                </tr>
                                            @endforeach
                                        @endif
                                        </tbody>
                                        <tfoot>
                                        <tr>
                                            <th>Invoice</th>
                                            <th>Type</th>
                                            <th>Method</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Date</th>
                                        </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div><!-- .components-preview -->
                </div>
            </div>
        </div>
    </div>

    <script>
        ;(function($) {
            'use strict'
            $(function() {
                $('#example1').DataTable({
                    responsive: true,
                })

                $('#example2').DataTable({
                    autoWidth: true,
                    scrollX: true,
                    fixedColumns: true,
                })

                $('#example3').DataTable({
                    autoWidth: true,
                    scrollX: true,
                    fixedColumns: true,
                })
            })
        })(jQuery)
    </script>
@endsection