@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>

<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="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="dash-header-part" style="padding:30px;">
	<div class="container">
		<div class="dash-header-card">
		
			<!-- Search Bar Implementation -->
			<div class="row" style="margin-top: 30px;">
			<div class="col-lg-12">
				<a href="{{ route('viewbusinessprofile') }}" class="btn btn-primary" style="float:right;">My Projects</a>
			</div>
			<div class="col-lg-12">
				<div style="margin-bottom:50px; text-align:center;">
					<h1>Create a Project</h1>
				</div>
				@if (session('error'))
					<div class="alert alert-danger">
						{{ session('error') }}
					</div>
				@endif
			</div>
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<div class="searchBar" >
					<input id="searchInput" class="searchInput" type="text" placeholder="Check Business Name Availibility" />
					<button class="btn btn-inline post-btn" onclick="getSearchValue()">Search</button>
				</div>
			</div>
			</div>
			<div class="row" style="margin-top: 30px;">
			<div class="col-lg-12" id="dash-header-alert">
				
			</div>
			</div>
			<!-- Implementation End -->
		
		</div>
	</div>
</section>
<section class="animation" id="animationdiv" style="margin-bottom:80px; display:none;">
	<div class="row">
		<div class="col-lg-12">
			<div class="images">
				<div class="domain">

					<img id="domain" src="{{ asset('frontend/animation/domain.png') }}" >
					<span>
						Domain
					</span>
				</div>
				<div class="host">

					<img id="hosting" src="{{ asset('frontend/animation/data.png') }}" alt="">
					<span>
						Hosting
					</span>
				</div>
				<div class="connecting">
					Connecting ....
				</div>
		
			</div>
		</div>
	</div>
</section>

@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	
	function buyNow(event)
	{
		event.preventDefault();
		// Show loader
		$('.animation').show();
		// $('#animationdiv').focus();
		// Scroll to the animation div
		document.getElementById('animationdiv').scrollIntoView({
			behavior: 'smooth' // Optional: Use smooth scrolling
		});
		// Get domain from data attribute
		var domain = $(event.target).data('domain');
		setTimeout(function() {
			// $('.animation').hide();
			// Redirect to specific route
			window.location.href = domain;
		}, 3000);
	}
	
	function getSearchValue()
	{
		$('#overlay2').show();
		// $('.animation').show();
		
		let value = document.getElementById("searchInput").value;
		if(value.length > 0)
		{
			var environmentURL = '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function env() in /home3/mybusinessprofil/test.mybusinessprofiles.com/resources/views/frontend/business.blade.php:262
Stack trace:
#0 {main}
  thrown in <b>/home3/mybusinessprofil/test.mybusinessprofiles.com/resources/views/frontend/business.blade.php</b> on line <b>262</b><br />