@extends('front.layouts.app')

@section('content')

    <main>
        <!-- hero section -->
        <section class="hero-section">
            <div class="overlay"></div>
            <div class="container">
                <div class="row align-items-center justify-content-center">
                    <div class="col-md-10 text-center">
                        <div class="text-hero-7">
                            <h2 data-aos="zoom-in" data-aos-duration="1000">
                                {{ \App\Helpers\TranslationHelper::translate('Investment & stocks') }}
                            </h2>
                            <p  style="line-height: 2; white-space: pre-line;" data-aos="fade-up" data-aos-duration="1200">
                                {{ \App\Helpers\TranslationHelper::translate('Investment & stocks Description') }}
                                {{ \App\Helpers\TranslationHelper::translate('Investment & stocks Description2') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="card-one" style="padding-top: 15px;">
            <div class="container">
                <div class="d-flex justify-content-center align-items-center">
                    <h2>{{ \App\Helpers\TranslationHelper::translate('Stock Cards') }}</h2>
                </div>
                <div class="row pt-5" style="padding-top: 1rem !important;">
                    @foreach ($stocks as $stock)
                        <div class="col-md-4">
                            <div class="product-card" data-aos="fade-up" data-aos-duration="1000" style="width: 100%">
                                <img src="{{ asset('storage/'.$stock->image) }}" alt="Product Image 1">
                                {{-- <h3>{{ $stock->title }} </h3> --}}
                                <h3 style="color: white">{{ $stock->title }}</h3>
                                <span class="badge" style="font-size: 1.2rem; padding: 8px 12px;">   {{ \App\Helpers\TranslationHelper::translate('Stocks') }} : {{ $stock->from }} - {{ $stock->to }}</span>
                                <div class="product-details product-details-{{ $stock->id }}"
                                    style="display: none; background: #470d14; color: #fff; padding: 10px; border-radius: 10px; margin-top: 10px;">
                                    <div style="max-height: 150px; overflow-y: auto; padding-right: 10px;">
                                        {!! strip_tags($stock->description) !!}
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between mt-3">
                                    <a href="javascript:void(0);"
                                        class="buy-now-btn custom-button btn-custom description-toggle more-info-toggle"
                                         data-id="{{ $stock->id }}">
                                        {{ \App\Helpers\TranslationHelper::translate('Buy Now') }}
                                    </a>

                                    <a href="{{ route('show-stock', ['id' => $stock->id]) }}"
                                        class="custom-button btn-custom">
                                        {{ \App\Helpers\TranslationHelper::translate('Details') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

    </main>

    <style>
        .btn-custom {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48%;
            padding: 12px;
            background-color: rgba(255, 255, 255, 0.2);
            color: #fff;
            border-radius: 5px;
            text-decoration: none;
            font-weight: bold;
            text-align: center;
            transition: 0.3s;
        }

        .btn-custom:hover {
            background-color: #470d14;
            color: #fff;
        }

        .product-details .d-flex {
            gap: 10px;
        }
    </style>
    @include('front.pages.modal-buy')
@endsection

@push('js')
{{-- <script>
function unlockContent() {
    let overlay = document.getElementById("overlay");
    overlay.style.opacity = "0";

    setTimeout(() => {
        overlay.style.display = "none";
        document.getElementById("main-content").style.display = "block";
    }, 300);
}
</script> --}}
@endpush