@extends('website.layouts.app')

@section('content')

    <section class="investor-page bg-light" id="investorPageMainSection">

        <section class="investors-header" id="investorsHeaderMainSection">
            <div class="field">
                <div class="container">
                    @if (! empty($investorsPageSettings['investors_page_header_title']))
                        <h2 class="text-white text-center fs-38 fw-bold mb-7">
                            {{ $investorsPageSettings['investors_page_header_title'] }}
                        </h2>
                    @endif
                </div>
            </div>
        </section>

        <section class="investors-program py-sm-5 pt-2" id="investorsProgramMainSection">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 align-self-center">
                        <h1 class="font-weight-bold h5 mb-4">
                            Welcome to the Investors Program at Techne Summit, your gateway to unlocking investment opportunities, fostering innovation, and driving growth in the dynamic landscape of investment & entrepreneurship.
                        </h1>
                        <h1 class="font-weight-bold h5 mb-1">
                            About the Investors Program:
                        </h1>
                        <p class="text mb-3 px-0 py-0">
                            The Investors Program at Techne Summit Cairo is curated exclusively for investors seeking to explore investment opportunities and stay ahead of emerging trends. Join us for a series of curated activities designed to facilitate meaningful connections and fruitful collaborations.
                        </p>

                        @if (! empty($investorsPageSettings['investors_page_apply_and_download_brochure_link']))
                            <div class="text-center">
                                <a href="{{ $investorsPageSettings['investors_page_apply_and_download_brochure_link'] }}" class="btn btn-primary text-center mx-auto text-uppercase border-0 px-3 py-2">APPLY NOW & DOWNLOAD BROCHURE</a>
                            </div>
                        @endif
                    </div>
                    <div class="col-sm-6 align-self-top">
                        <img src="{{ asset('website/assets/images/investors-page/KMA02455.jpg') }}" alt="" class="img-fluid mx-auto">
                    </div>
                </div>
            </div>
        </section>

        <section class="py-sm-5 pt-2" id="investorsGallerySection">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 mb-3 align-self-center">
                        <img src="{{ asset('website/assets/images/investors-page/DSC09408.jpg') }}" alt="" class="img-fluid mx-auto">
                    </div>
                    <div class="col-sm-6 mb-3 align-self-center">
                        <img src="{{ asset('website/assets/images/investors-page/_W4A2047-2.jpg') }}" alt="" class="img-fluid mx-auto">
                    </div>
                    <div class="col-sm-6 mb-3 align-self-center">
                        <img src="{{ asset('website/assets/images/investors-page/DSC09300.jpg') }}" alt="" class="img-fluid mx-auto">
                    </div>
                    <div class="col-sm-6 mb-3 align-self-center">
                        <img src="{{ asset('website/assets/images/investors-page/DSC09685.jpg') }}" alt="" class="img-fluid mx-auto">
                    </div>
                </div>
            </div>
        </section>

        <section class="investors-program pb-sm-5 pt-2" id="investorsWhyParticipateSection">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 mb-3 align-self-center">
                        <h2 class="font-weight-bold h5 color1 mb-3">Why Participate:</h2>
                        <ul>
                            <li class="text"><b>Access to Promising Startups</b> from across industries</li>
                            <li class="text"><b>Networking Opportunities</b> with fellow investors, industry leaders, and entrepreneurs.</li>
                            <li class="text"><b>Insights from Experts</b> through different discussions and valuable content.</li>
                            <li class="text"><b>Exclusive Investors Networking</b> by participating in meetings with VCs and GPs.</li>
                            <li class="text"><b>Investors Exclusive Reception</b> at the Greek Campus.</li>
                            <li class="text"><b>Investors Lounge</b> to elevate your experience and create transformative partnerships.</li>
                            <li class="text"><b>Investors Breakfast</b> for a morning of networking, insights, and boundless potential.</li>
                            <li class="text"><b>Investors/Startups Mentorship</b> by sharing your expertise with entrepreneurs shaping the future.</li>
                        </ul>
                        <h2 class="font-weight-bold h5 color1 mb-3 mt-3">Register Now:</h2>
                        <p class="text mb-3 px-0 py-0">
                            Don't miss your chance to be part of the <b>Investors Program at Techne Summit Cairo 2024.</b> Register now to secure your spot and gain access to a world of investment opportunities, networking events, and industry insights.
                        </p>
                        <h2 class="font-weight-bold h5 color1 mb-3 mt-3">Stay Connected:</h2>
                        <p class="text mb-3 px-0 py-0">
                            Follow us on social media and subscribe to our newsletter for the latest updates, speaker announcements, and exclusive offers.
                        </p>

                        @if (! empty($investorsPageSettings['investors_page_apply_and_download_brochure_link']))
                            <div class="text-center mt-3">
                                <a href="{{ $investorsPageSettings['investors_page_apply_and_download_brochure_link'] }}" class="btn btn-primary text-center mx-auto text-uppercase border-0 px-3 py-2">APPLY NOW & DOWNLOAD BROCHURE</a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        <div class="container mt-5">
            <h2 class="text-primary text-uppercase text-center fs-32 fw-bold mb-7">
                {{ __('app.Investors attend techne') }}
            </h2>

            <div class="row justify-content-center gx-4 gx-md-6 gy-5 gy-md-8 pb-7">
                @forelse ($eventInvestors as $investor)
                    <div class="col-6 col-xl-2 col-lg-3 col-md-4 col-sm-6 mx-auto">
                        @php
                            $isShowHomeStyles = $showHomeStyles ?? false;
                        @endphp

                        <a href="#" data-bs-toggle="modal" data-bs-target="#speakerCardModal{{ $investor->ulid }}">
                            <div class="text-center">
                                <div class="image-box border border-5 mb-2 @if($loop->even) border-event-color @else border-primary @endif" style="height: 220px; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                    <img class="speaker-image" src="{{ $investor->main_image_thumbnail ?? $investor->main_image_path }}"  alt="{{ $investor->name }}"  />
                                </div>

                                @if (! empty($investor->company_logo))
                                    <div class="text-center mb-2">
                                        <img src="{{ asset('storage/'.$investor->company_logo) }}" alt="{{ $investor->company_name }}" class="img-fluid mx-auto speaker-company-logo" />
                                    </div>
                                @endif
                                <div class="text-primary lh-md mb-1 speaker-details-info">
                                    <div class="lh-sm text-capitalize fw-bold mb-1 @if($isShowHomeStyles) fs-20 @else fs-18 @endif">{{ $investor->name }}</div>
                                    
                                    @if (! empty($investor->job_title))
                                        <div class="lh-sm @if($isShowHomeStyles) fs-16 @else fs-14 @endif">
                                            {{ $investor->job_title }}
                                        </div>
                                    @endif
                                    
                                    @if (! empty($investor->company_name))
                                        <div class="text-capitalize @if($isShowHomeStyles) fs-16 @else fs-14 @endif">
                                            {{ $investor->company_name }}
                                        </div>
                                    @endif
                                    
                                    @if (! empty($investor->country))
                                        <div class="text-event-color text-capitalize fw-bold @if($isShowHomeStyles) fs-16 @else fs-14 @endif">
                                            {{ $investor->country }}
                                        </div>
                                    @endif
                                </div>
                            </div>                            
                        </a>

                        <div class="modal fade" id="speakerCardModal{{ $investor->ulid }}" tabindex="-1">
                            <div class="modal-dialog modal-dialog-centered modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header py-6">
                                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>

                                    <div class="modal-body p-5">
                                        <div class="row g-5">
                                            <div class="col-10 col-lg-3 col-sm-3">
                                                <div class="border border-5 mb-3 overflow-hidden d-flex align-items-center justify-content-center @if($loop->even) border-event-color @else border-primary @endif">
                                                    <img class="speaker-image speaker-image-modal" src="{{ $investor->main_image_thumbnail }}" srcset="{{ $investor->main_image_path }} 2x" alt="{{ $investor->name }}" />
                                                </div>
                                            </div>

                                            <div class="col-12 col-lg">
                                                <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                                                    <div class="text-primary lh-md">
                                                        <h3 class="text-primary text-capitalize fs-24 fw-bold mb-2">{{ $investor->name }}</h3>

                                                        @if (! empty($investor->job_title))
                                                            <div class="fs-15">{{ $investor->job_title }}</div>
                                                        @endif

                                                        @if (! empty($investor->company_name))
                                                            <div class="text-capitalize fs-15">{{ $investor->company_name }}</div>
                                                        @endif

                                                        @if (! empty($investor->country))
                                                            <div class="text-event-color text-capitalize fs-15 fw-bold">{{ $investor->country }}</div>
                                                        @endif
                                                    </div>

                                                    @if (! empty($investor->company_logo))
                                                        <div>
                                                            <img src="{{ asset('storage/'.$investor->company_logo) }}" alt="{{ $investor->company_name }}" class="img-fluid mx-auto speaker-company-logo" />
                                                        </div>
                                                    @endif
                                                </div>

                                                <div>
                                                    {!! html_entity_decode($investor->about) !!}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 mx-auto text-center">
                        <p class="lead my-16 fs-38">
                            Stay tuned
                        </p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>

    @include('website.sections.subscribe-form')

@endsection