@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">Investment Pack</h4>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);" class="text-white-50">Dashboards</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Pack</li>
        </ol>
    </div>
@endsection

@section('content')
    <div class="row">
        {{-- Top Performers --}}

        @foreach ($data as $groupsofdatas => $childofdatas)
            <div class="col-xxl-12  col-lg-12">
                <div class="card custom-card overflow-hidden">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <div class="p-2">

                                    <h4 class="fw-semibold mb-2">
                                        {{ str_replace('Pack', '', ucwords(str_replace('-', ' ', $groupsofdatas))) }} <span
                                            class="text-primary">Pack</span>
                                    </h4>
                                    <p class="mb-4 text-muted fs-14 op-7">
                                        {{ $childofdatas['catDesc'] }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xxl-12 col-xl-12 col-lg-12">
                <div class="row">
                    @foreach ($childofdatas['allPlans'] as $children)
                        <div class="col-xxl-3 col-lg-4  col-sm-6 col-12">
                            <div class="card custom-card">
                                <img src="{{ $children['image'] }}" height="200px" class="card-img-top" alt="...">
                                <div class="d-flex align-items-center justify-content-between nft-like-section w-100 px-3">
                                    <div class="flex-fill">
                                    </div>
                                    <div>
                                        @if ($children['soldOutStatus'] == 'YES')
                                            <span class="badge nft-like-badge text-fixed-white bg-danger p-2"><i
                                                    class="fa-solid fa-lock"></i> Sold Out</span>
                                        @endif
                                    </div>
                                </div>
                                <div class="card-body">
                                    {{-- <p class="mb-0 text-fixed-white nft-auction-time bg-secondary">
                            {{ date('d M,Y', strtotime($children['createdAt'])) }}
                        </p> --}}
                                    <div class="d-flex justify-content-between align-items-start mb-3  flex-wrap">
                                        <div class="d-inline-flex align-items-start position-relative">
                                            <a aria-label="anchor"
                                                @if ($children['soldOutStatus'] == 'YES') href="javascript:void(0)"
                                @else
                                href="{{ route('user.web.invest', ['name' => $groupsofdatas, 'plan' => $children['id']]) }}" @endif
                                                class="stretched-link"></a>
                                            <div class="me-2">
                                                <img src="{{ $children['image'] }}" alt="img"
                                                    class="avatar avatar-md rounded-circle bg-primary-transparent">
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6
                                                    class="mb-0   {{ $children['soldOutStatus'] == 'YES' ? 'text-muted' : 'text-primary' }}">
                                                    {{ $children['name'] }} </h6>
                                                <span class="fs-13 text-muted">
                                                    @ {{ ucwords(str_replace('-', ' ', $groupsofdatas)) }}
                                                </span>
                                            </div>
                                        </div>
                                        <span
                                            class="fs-13  {{ $children['percentageIncrease'] >= 0 ? 'text-success' : 'text-danger' }} ">
                                            {{ $children['percentageIncrease'] >= 0 ? '+' : '' }}{{ number_format($children['percentageIncrease'], 2, '.', ',') }}%
                                        </span>
                                    </div>
                                    <h6 class="fs-14 mb-3 pt-6 pb-6 "><a href="javascript:void(0);" class="text-muted">
                                            {{ Str::limit($children['description'], 35, $end = '...') }} </a>
                                    </h6>
                                    <div class="d-flex align-items-end  flex-wrap">
                                        <div class="flex-grow-1">
                                            <p class="fs-14 mb-1 text-muted">Minimum Amount</p>
                                            <h6 class="fs-18 mb-0">
                                                <i class="bi bi-coin"></i>
                                                ${{ number_format(floatval($children['min']), 2) }}
                                            </h6>
                                        </div>
                                        @php
                                            // Determine button class
                                            $buttonClass = ($children['soldOutStatus'] == 'YES' &&
                                                $childofdatas['isFoundation'] === false
                                                    ? 'btn-dark'
                                                    : $children['soldOutStatus'] == 'YES' &&
                                                        $childofdatas['isFoundation'] === true &&
                                                        $childofdatas['availableSlot'] === 0)
                                                ? 'btn-dark'
                                                : 'btn-primary';

                                            // Determine href value
                                            if (
                                                $children['soldOutStatus'] == 'YES' &&
                                                $childofdatas['isFoundation'] === false
                                            ) {
                                                $href = 'javascript:void(0)';
                                            } elseif (
                                                $children['soldOutStatus'] == 'YES' &&
                                                $childofdatas['isFoundation'] === true &&
                                                $childofdatas['availableSlot'] === 0
                                            ) {
                                                $href = 'javascript:void(0)';
                                            } else {
                                                $href = route('user.web.invest', [
                                                    'name' => $groupsofdatas,
                                                    'plan' => $children['id'],
                                                ]);
                                            }
                                        @endphp
                                        <a href="{{ $href }}"
                                            class="min-w-fit-content btn  mt-0 mt-xxl-2 {{ $buttonClass }} ">Invest</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach



    </div>
@endsection