@extends('components.customer-layout')

@section('header')
    <div class="page-header-breadcrumb d-md-flex d-block align-items-center justify-content-between ">
        <h4 class="fw-medium mb-0">{{ ucwords(str_replace('-', ' ', $pack)) }}</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);"
                    class="text-white-50">{{ ucwords(str_replace('-', ' ', $pack)) }}</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">{{ $data->name }} </li>
        </ol>
    </div>
@endsection


@section('content')
    <div class="row">
        <div class="col-xl-9">
            <div class="card custom-card">
                <div class="card-header d-md-flex d-block">
                    <div class="h5 mb-0 d-sm-flex d-bllock align-items-center">
                        <div class="me-2">
                            <img src="{{ $data->image }}" width="100%" alt="img"
                                class="avatar avatar-md rounded-circle bg-primary-transparent">
                        </div>
                        <div class="ms-sm-2 ms-0 mt-sm-0 mt-2">
                            <div class="h5 fw-semibold mb-0">
                                {{ $data->name }}
                            </div>
                            <p class="text-left fs-11 mt-2">
                                Industries :
                                <span class="text-primary">{{ $data->industry }}</span>
                            </p>
                        </div>
                    </div>
                    <div class="ms-auto mt-md-0 mt-2">
                        <button class="btn btn-secondary me-1">
                            Min ${{ number_format(floatval($data->min), 2) }}
                        </button>
                        {{-- <button class="btn btn-primary">
                            Invest
                        </button> --}}
                    </div>
                </div>
                <div class="card-body">
                    <div class="row gy-3">
                        <div class="col-xl-12">
                            <div class="row">
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">

                                    <p class="fw-bold mb-1">ABOUT THIS PACK</p>
                                    <p class="mb-1 text-muted" style="line-height: 28px;">{{ $data->description }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-4 my-3">
                            <p class="fw-semibold text-muted mb-1">Minimum Amount :</p>
                            <p class="fs-15 mb-1">
                                ${{ number_format(floatval($data->min), 2) }}
                            </p>
                        </div>
                        <div class="col-xl-4 my-3">
                            <p class="fw-semibold text-muted mb-1">Maximum Amount :</p>
                            <p class="fs-15 mb-1"> ${{ number_format(floatval($data->max), 2) }}</p>
                        </div>
                        <div class="col-xl-4 my-3">
                            <p class="fw-semibold text-muted mb-1">Total Investment :</p>
                            <p class="fs-16 mb-1 fw-semibold">
                                @php
                                    $total = 0;
                                @endphp

                                @if (!empty($investment))
                                    @foreach ($investment as $invest)
                                        @php
                                            $total += $invest->amount;
                                        @endphp
                                    @endforeach
                                @endif

                                ${{ number_format($total, 2, '.', ',') }}
                            </p>
                        </div>
                        @if (!empty($investment))
                            <div class="col-xl-12">
                                <div class="table-responsive">
                                    <table class="table nowrap text-nowrap border mt-4">
                                        <thead>
                                            <tr>
                                                <th>SERIAL NO</th>
                                                <th>INVESTED</th>
                                                <th>AMT ACCURED</th>
                                                <th>DATE INVESTED</th>
                                                <th>STATUS</th>

                                            </tr>
                                        </thead>
                                        <tbody>

                                            @forelse ($investment as $datas)
                                                <tr class="">
                                                    <td>
                                                        <div class="fw-semibold">{{ $datas->random }}</div>
                                                    </td>
                                                    <td>
                                                        <div class="text-muted">


                                                            ${{ number_format(floatval($datas->amount), 2) }}
                                                        </div>
                                                    </td>
                                                    <td class="product-quantity-container">
                                                        ${{ number_format(floatval($datas->accuredAmount), 2) }}
                                                    </td>
                                                    <td>
                                                        {{ date('d M,Y', strtotime($datas->createdAt)) }}
                                                    </td>
                                                    <td>
                                                        {{ $datas->status }}
                                                    </td>
                                                </tr>
                                            @empty
                                            @endforelse


                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endif

                        <div class="col-xl-12">
                            <div class="mt-4">
                                <p>
                                    <span class="fw-semibold text-muted fs-12">Trading Frequency
                                        {{-- <span class="badge bg-warning-transparent">Pending</span></span> --}}
                                </p>
                                <div class="alert alert-success" role="alert">
                                    Weekly Rebalancing Ensures That Our AI is Prioritizing The Best Asset Classes For Your
                                    Target Allocations.
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>
        <div class="col-xl-3">
            <div class="card custom-card">
                <div class="card-header">
                    <div class="card-title text-center col-12">Subscribe To This Portfolio</div>
                </div>
                <div class="card-body">
                    <div class="row gy-3">
                        <div class="col-xl-12">
                            <p class="fs-20 text-center fw-semibold">
                                <span class="text-muted">Balance :</span>
                                ${{ number_format(floatval($account->balance), 2) }}
                            </p>
                            <p class="text-center fs-11">
                                The amount you enter will be deducted from your account balance and invested in the
                                portfolio selected. The Minimum investment amount is
                                <span class=" text-success">${{ number_format(floatval($data->min), 2) }}</span>
                            </p>

                            @if ($data->soldOutStatus == 'YES' && $isFoundation === 'FALSE')
                                <div class="col-xl-12">
                                    <div class="mt-4">
                                        <div class="alert alert-danger" role="alert">
                                            This Pack Has Been Sold Out
                                        </div>
                                    </div>
                                </div>
                            @elseif ($data->soldOutStatus == 'YES' && $isFoundation === 'TRUE' && $availableSlot === 0)
                                <div class="col-xl-12">
                                    <div class="mt-4">
                                        <div class="alert alert-danger" role="alert">
                                            This Pack Has Been Sold Out
                                        </div>
                                    </div>
                                </div>
                            @elseif(!empty($isAllocationMaxedOut) && $isAllocationMaxedOut && $isFoundation === 'FALSE')
                                <div class="col-xl-12">
                                    <div class="mt-4">
                                        <div class="alert alert-danger" role="alert">
                                            You have maxed out your allocated slot
                                        </div>
                                    </div>
                                </div>
                            @elseif(!empty($isAllocationMaxedOut) && $isAllocationMaxedOut && $availableSlot == 0)
                                <div class="col-xl-12">
                                    <div class="mt-4">
                                        <div class="alert alert-danger" role="alert">
                                            You have maxed out your allocated slot
                                        </div>
                                    </div>
                                </div>
                            @else
                                <form class="_processDepositForm"
                                    action="{{ route('user.web.create.investment', ['planId' => $data->id]) }}"
                                    method="POST">
                                    @csrf
                                    <div class="row">

                                        @if (session('message'))
                                            <p class="text-danger text-center mt-1 mb-1"> {{ session('message') }}</p>
                                        @endif

                                        @if (session('status'))
                                            <p class="text-success text-center mt-1 mb-1 resendEmailTextMessage">
                                                {{ session('status') }}</p>
                                        @endif

                                        <div class="col-xl-12">

                                            <div class="">
                                                <div class="col-xl-12">
                                                    <div class="form-floating my-4 floating-primary">
                                                        <input required type="number" name="amount" class="form-control"
                                                            id="floatingInputprimary">
                                                        <label for="floatingInputprimary">Amount</label>
                                                    </div>
                                                    @error('amount')
                                                        <p class="text-danger ">{{ $message }}</p>
                                                    @enderror
                                                </div>
                                                <button type="submit" class="btn btn-primary col-12 _processDeposit"> <i
                                                        class="bi bi-arrow-right-circle-fill"></i> INVEST</button>

                                            </div>
                                        </div>
                                    </div>
                                </form>
                            @endif




                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection