@extends('dashboard.layout', ['user'=>$user, 'id' => 21])

@section('dashboard')
<div class="mt-5 container">

    <section-header title="Summary"></section-header>

    <div class="firstLine mf_bg_dark">
        <div class="row" style="min-height: 100px; margin: auto;">
            <div class="col-sm-6 col-md-3 col-6">
                <div class="content">
                    <div class="number" style="{{ $profit_generated >= 0 ? 'color: #00D97E' : 'color: red' }}">
                        @if ($profit_generated >= 0)
                        <span>+{{ round($profit_generated,0) }}</span>
                        @else
                        <span>{{ round($profit_generated,0) }}</span>
                        @endif
                    </div>
                    <div class="mf_txt_small" style="color: #6e84a3">
                        <div>Profit Générated</div>
                        <div style="text-align: center;">(USDT)</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3 col-6">
                <div class="content">
                    <div class="number">{{ $amount_fees }}</div>
                    <div class="mf_txt_small" style="color: #6e84a3">
                        <div>Fees Paid</div>
                        <div style="text-align: center;">(USDT)</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3 col-6">
                <div class="content">
                    <div class="number">{{ $amount_binance }}</div>
                    <div class="mf_txt_small" style="color: #6e84a3">
                        <div>Paid via Binance</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-3 col-6">
                <div class="content">
                    <div class="number">{{ $amount_stripe }}</div>
                    <div class="mf_txt_small" style="color: #6e84a3">
                        <div>Paid via Stripe</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section-header title="Bill to pay"></section-header>

    <div class="firstLine mf_bg_dark" style="padding: 15px">
        @if ($bill_to_paid === false)
        <div class="row" style="text-align: center;">
            <div class="col-md-6 col-sm-12" style="align-self: center;">
                <div>You have one pending invoice !</div>
                <div>You need to pay to do access new arbitrages.</div>
            </div>
            <div class="col-md-6 col-sm-12" style="align-self: center;">
                <div style="font-weight: bold;font-size: 20px;">{{$amount_to_paid}} USDT</div>
                <div style="margin-top: 5px;">
                    <a class="mf_btn" id="todev" href={{ route('crypto.pay') }} role="button">Pay now</a>
                </div>

                <!-- <script>
                    setTimeout(() => {
                        // window.location = document.getElementById('todev').href;
                    }, 3000);
                </script> -->
            </div>
        </div>
        @else
        <div style="padding: 20px;min-height: 100px;display: flex;align-items: center;justify-content: center;">
            You don't have anything to pay
        </div>
        @endif
    </div>

    <section-header title="History"></section-header>
    
    @if (count($invoices) > 0)
    <div>
        <div style="display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;"></div>
    </div>
    <div class="tableLine w-100" style="overflow-x: auto;">
        <table class="mf_table table-sm table-nowrap">
            <thead>
                <tr style="text-align: center;text-transform: uppercase;color: #8492a6;border-bottom: 1px solid #8492a6;">
                    <th scope="col">Invoice Name</th>
                    <th scope="col">Date</th>
                    <th scope="col">Amount</th>
                    <!-- <th scope="col">Paid via</th> -->
                    <th scope="col"></th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoices as $invoice)
                <tr style="text-align: center;">
                    <td>Invoice {{$invoice->invoice_number}}</td>
                    <td>{{$invoice->date}}</td>
                    <td>{{$invoice->myfo_fees}}</td>
                    <!-- <td>{{$invoice->myfo_fees}}</td> -->
                    <td>
                        @if ($user->admin_test === 0)
                        <a href="{{ route('invoice.show', $invoice->invoice_number) }}" target="_blank" rel="noopener" role="button" class="mf_btn">
                            Download
                        </a>
                        @else
                        <button type="button" class="mf_btn" disabled>
                            Download
                        </button>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @else
    <div class="firstLine mf_bg_dark">
        <div style="display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 30vh;
        text-align: center">
            <svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" fill="white" class="bi bi-receipt" viewBox="0 0 16 16">
                <path d="M1.92.506a.5.5 0 0 1 .434.14L3 1.293l.646-.647a.5.5 0 0 1 .708 0L5 1.293l.646-.647a.5.5 0 0 1 .708 0L7 1.293l.646-.647a.5.5 0 0 1 .708 0L9 1.293l.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .801.13l.5 1A.5.5 0 0 1 15 2v12a.5.5 0 0 1-.053.224l-.5 1a.5.5 0 0 1-.8.13L13 14.707l-.646.647a.5.5 0 0 1-.708 0L11 14.707l-.646.647a.5.5 0 0 1-.708 0L9 14.707l-.646.647a.5.5 0 0 1-.708 0L7 14.707l-.646.647a.5.5 0 0 1-.708 0L5 14.707l-.646.647a.5.5 0 0 1-.708 0L3 14.707l-.646.647a.5.5 0 0 1-.801-.13l-.5-1A.5.5 0 0 1 1 14V2a.5.5 0 0 1 .053-.224l.5-1a.5.5 0 0 1 .367-.27zm.217 1.338L2 2.118v11.764l.137.274.51-.51a.5.5 0 0 1 .707 0l.646.647.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.646.646.646-.646a.5.5 0 0 1 .708 0l.509.509.137-.274V2.118l-.137-.274-.51.51a.5.5 0 0 1-.707 0L12 1.707l-.646.647a.5.5 0 0 1-.708 0L10 1.707l-.646.647a.5.5 0 0 1-.708 0L8 1.707l-.646.647a.5.5 0 0 1-.708 0L6 1.707l-.646.647a.5.5 0 0 1-.708 0L4 1.707l-.646.647a.5.5 0 0 1-.708 0l-.509-.51z" />
                <path d="M3 4.5a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 1 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm8-6a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
            </svg>
            <p class="fts-18 mb-0 mt-5" style="font-weight: 900; color:white">
                You do not have any invoices available at this time.
            </p>
        </div>
    </div>
</div>
@endif
@endsection