@extends('frontend.layout.main')
@section('main-container')
{{-- <style>
    .host,
    .domain,
    img {
        width: 90px;
        height: 90px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }

    .images {
        display: flex;
        justify-content: space-around;
    }

    .domain::after {
        content: '';
        position: absolute;
        height: 2px;
        width: 100px;
        transform: translateX(100%);

        background-color: #FC6736;
        top: 50%;
        animation: moveLeft 2s infinite linear 0.65s forwards;
        ;

    }

    .host::before {
        content: '';
        position: absolute;
        height: 2px;
        width: 100px;
        background-color: #125C13;
        top: 50%;
        right: 0;
        transform: translateX(-100%);
        animation: moveRight 2s infinite linear 0.65s forwards;
        ;
    }

    @keyframes moveLeft {
        0% {
            left: 0;
        }

        100% {
            left: 200px;
            opacity: 0;
        }
    }

    @keyframes moveRight {
        0% {
            right: 0;
        }

        100% {
            right: 200px;
            opacity: 0;

        }
    }

    .connecting {
        position: absolute;
        top: 90%;
        font-weight: bold;
    }

    .single-banner {
        background: url('../../frontend/images/new/search.png');
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: cover !important;
        padding: 100px 0px !important;
        position: relative !important;
        z-index: 1;
    }
</style>


<style>
    .btn-buy {
        background: #0044bb !important;
        color: white !important;
        width: 175px !important;
    }

    .alert {
        padding: 15px;
        display: flex;
        justify-content: space-between;
        border-radius: 4px;
        align-items: center;
    }

    .searchBar {
        display: flex;
        column-gap: 5px;
    }

    .searchInput {
        width: 90%;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0px 2px 5px #c4c4d3;
        color: black;

    }
</style> --}}
<style>
        /* Media Queries */
        @media (max-width: 1200px) {
            .overlay-container iframe {
                width: 1000px !important;
            }
        }

        @media (max-width: 992px) {
            .overlay-container iframe {
                width: 900px !important;
            }
        }

        @media (max-width: 768px) {
            .overlay-container iframe {
                width: 330px !important;
            }
        }
    </style>
{{-- <section class="single-banner dashboard-banner">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="single-content">
                    <h2>{{ $PageHeading }}</h2>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $PageHeading }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</section> --}}
<section class="getstartedSection">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 paddingend">
                <div class="getstartedimg">
                    <img src="{{ asset('frontend/images/4steps.png') }}" alt="" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>
<section class="dash-header-part d-none">
    <div class="container">
        <div class="dash-header-card">
            <div class="row">
                <div class="col-lg-5">
                    <div class="dash-header-left">
                        <div class="dash-avatar">
                            <a href="#"><img src="{{ asset('frontend/images/avatar/01.jpg') }}"
                                    alt="avatar"></a>
                        </div>
                        <div class="dash-intro">
                            <h4><a href="#">{{ Session::get('name') }}</a></h4>
                            <!-- <h5>new seller</h5> -->
                            <ul class="dash-meta">
                                <li><i class="fas fa-phone-alt"></i><span>{{ Session::get('phone') }}</span></li>
                                <li><i class="fas fa-envelope"></i><span>{{ Session::get('email') }}</span></li>
                                <!-- <li><i class="fas fa-map-marker-alt"></i><span>Los Angeles, West America</span></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="dash-header-right">
                        <div class="dash-focus dash-list">
                            <h2>${{ Session::get('balance') }}</h2>
                            <p>Balance</p>
                        </div>
                        <!-- <div class="dash-focus dash-book">
       <h2>2433</h2>
       <p>total follower</p>
      </div>
      <div class="dash-focus dash-rev">
       <h2>2433</h2>
       <p>total review</p>
      </div> -->
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>
    <section class="portfolioOverlaySection">
        <div class="row">
            @foreach($BusinessAccounts as $BusinessAccount)
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="img-overlay text-center">
                    <div class="overlay-container ">
                        <a href="https://mybusinessprofiles.com/{{ $BusinessAccount->business_slug }}" target="_blank">
                            <iframe src="https://mybusinessprofiles.com/{{ $BusinessAccount->business_slug }}"   style="width: 1200px; height: 500px; overflow-y: hidden; border: none;"></iframe>
                            <div class="overlay-content">
                                <h6>{{ $BusinessAccount->business_name }}</h6>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </section>
@endsection