@extends('layouts.landing')

@section('title', 'Investments')

@section('content')
    <style>
        table {
            border-spacing: 1;
            border-collapse: collapse;
            background: white;
            border-radius: 6px;
            overflow: hidden;
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
            position: relative;
        }

        table * {
            position: relative;
        }

        table td,
        table th {
            padding-left: 8px;
        }

        table thead tr {
            height: 60px;
            background: #5151ff;
            font-size: 16px;
        }

        table tbody tr {
            height: 48px;
            border-bottom: 1px solid #e3f1d5;
        }

        table tbody tr:last-child {
            border: 0;
        }

        table td,
        table th {
            text-align: left;
        }

        th {
            color: white
        }

        table td.l,
        table th.l {
            text-align: right;
        }

        table td.c,
        table th.c {
            text-align: center;
        }

        table td.r,
        table th.r {
            text-align: center;
        }

        @media screen and (max-width: 35.5em) {
            table {
                display: block;
            }

            table>*,
            table tr,
            table td,
            table th {
                display: block;
            }

            table thead {
                display: none;
            }

            table tbody tr {
                height: auto;
                padding: 8px 0;
            }

            table tbody tr td {
                padding-left: 45%;
                margin-bottom: 12px;
            }

            table tbody tr td:last-child {
                margin-bottom: 0;
            }

            table tbody tr td:before {
                position: absolute;
                font-weight: 700;
                width: 40%;
                left: 10px;
                top: 0;
            }

            table tbody tr td:nth-child(1):before {
                content: "Code";
            }

            table tbody tr td:nth-child(2):before {
                content: "Stock";
            }

            table tbody tr td:nth-child(3):before {
                content: "Cap";
            }

            table tbody tr td:nth-child(4):before {
                content: "Inch";
            }

            table tbody tr td:nth-child(5):before {
                content: "Box Type";
            }
        }


        blockquote {
            color: white;
            text-align: center;
        }
    </style>


    <div class="row mobile-mt-8">
        <div class="col-12">
            <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                <div class="card-body p-4">
                    <div class="row">
                        <div class="col">
                            <h4 class="fw-700">Transaction History</h5>
                        </div>
                    </div>

                    <div class="row my-4">
                        <table>
                            <thead>
                                <tr>
                                    <th>TRANSACTION DATE</th>
                                    <th>NO OF SHARES</th>
                                    <th>AMOUNT</th>
                                    {{-- <th>TOTAL SHARES</th> --}}

                                </tr>
                                <thead>
                                <tbody>
                                    @if (count($investmentDetails) > 0)
                                        {{-- @php
                                            $total = 0;
                                        @endphp --}}
                                        @foreach ($investmentDetails as $key => $inv)
                                            {{-- @php
                                                $total += $inv->slot_bought;
                                            @endphp --}}
                                            <tr>
                                                <td>{{ Carbon\Carbon::parse($inv->created_at)->format('Y-M-d H:i') }}
                                                </td>
                                                <td>{{ $inv->slot_bought }}</td>
                                                <td>₦{{ number_format($inv->amount, 2) }}</td>
                                                {{-- <td>{{ $total }}</td> --}}


                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                        </table>

                    </div>
                    {{ $investmentDetails->links('vendor.pagination.bootstrap-4') }}
                    @if (count($investmentDetails) < 1)
                        <div class="p-4 text-center" style="display: flex; align-items: center; justify-content: center;">
                            <h5>No records to display</h5>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="fh5co-loader" id="reloader" style="display: none">
        <div class="loader"></div>
    </div>



@endsection