@extends('storefront.layouts.main')

@section('title','Web Hosting & Domain Registration')

@section('content')
<!-- Domain Search Block -->
<div class="row">
    <div class="col-md-12">
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption"><h2 class="no-margin">Domain Registration</h2></div>
            </div>
            <div class="portlet-body" style="padding: 30px;">
                <h4 class="text-center">Find your new domain name. Enter your name or keywords below to check availability.</h4>
                <form action="{{ route('storefront.domain.search') }}" method="GET" id="homeSearchForm">
                    <input type="hidden" name="domain" id="homeSearchDomain" value="">
                    <div class="domain-block">
                        <div class="input-group input-group-lg domain-block-search">
                            <input type="text" id="homeSearchInput" placeholder="example.com" class="form-control domain-block-search-input" required>
                            <span class="input-group-btn domain-search-btn">
                                <button type="submit" class="btn btn-danger btn-block">Search</button>
                            </span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Quick Action Blocks -->
<div class="row">
    <div class="col-md-4">
        <div class="portlet box yellow">
            <div class="portlet-title">
                <div class="caption"><h2 class="no-margin">Register a Domain</h2></div>
            </div>
            <div class="portlet-body">
                <h4>Get your perfect domain name starting from &#2547;250/yr</h4>
                <a href="{{ route('storefront.domains') }}" class="btn green">Register Now <i class="fa fa-long-arrow-right"></i></a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="portlet box red">
            <div class="portlet-title">
                <div class="caption"><h2 class="no-margin">Transfer Domain to Us</h2></div>
            </div>
            <div class="portlet-body">
                <h4>Transfer now to extend your domain by 1 year!*</h4>
                <a href="{{ route('storefront.domain-transfer') }}" class="btn purple">Transfer Now <i class="fa fa-long-arrow-right"></i></a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="portlet box green">
            <div class="portlet-title">
                <div class="caption"><h2 class="no-margin">Visit Our Store</h2></div>
            </div>
            <div class="portlet-body">
                <h4>Choose the best hosting plan for your business.</h4>
                <a href="{{ route('storefront.products') }}" class="btn blue">Explore Now <i class="fa fa-long-arrow-right"></i></a>
            </div>
        </div>
    </div>
</div>

<!-- Features Section -->
<div class="row">
    <div class="col-md-3">
        <div class="portlet light">
            <div class="portlet-body text-center">
                <i class="fa fa-bolt fa-3x theme-font" style="margin-bottom:15px;"></i>
                <h4 class="bold">Lightning Fast</h4>
                <p class="font-grey-mint">High-performance SSD servers for blazing-fast load times.</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="portlet light">
            <div class="portlet-body text-center">
                <i class="fa fa-shield fa-3x font-green" style="margin-bottom:15px;"></i>
                <h4 class="bold">99.9% Uptime</h4>
                <p class="font-grey-mint">Guaranteed uptime with redundant infrastructure.</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="portlet light">
            <div class="portlet-body text-center">
                <i class="fa fa-lock fa-3x font-blue" style="margin-bottom:15px;"></i>
                <h4 class="bold">Free SSL</h4>
                <p class="font-grey-mint">Every hosting plan comes with free SSL certificates.</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="portlet light">
            <div class="portlet-body text-center">
                <i class="fa fa-headphones fa-3x font-purple" style="margin-bottom:15px;"></i>
                <h4 class="bold">24/7 Support</h4>
                <p class="font-grey-mint">Expert support team available around the clock.</p>
            </div>
        </div>
    </div>
</div>

<!-- Popular TLDs -->
<div class="row">
    <div class="col-md-12">
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject theme-font bold uppercase">Popular Domain Extensions</span>
                </div>
                <div class="actions">
                    <a href="{{ route('storefront.tld-pricing') }}" class="btn btn-sm btn-default">View All Pricing <i class="fa fa-long-arrow-right"></i></a>
                </div>
            </div>
            <div class="portlet-body">
                <div class="row">
                    @php
                        $popularTlds = \App\Models\TldExtension::where('is_active', true)
                            ->with(['pricing' => fn($q) => $q->where('currency_code', 'BDT')->where('years', 1)])
                            ->orderBy('display_order')->take(6)->get();
                    @endphp
                    @foreach($popularTlds as $tld)
                    <div class="col-md-2 col-sm-4 col-xs-6 text-center" style="padding:15px;">
                        <h3 class="bold theme-font" style="margin-bottom:5px;">{{ $tld->tld }}</h3>
                        @if($tld->pricing->isNotEmpty())
                            <p style="font-size:18px; font-weight:bold;">&#2547;{{ number_format($tld->pricing->first()->register_price, 0) }}</p>
                            <span class="font-grey-mint font-sm">/year</span>
                        @endif
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.getElementById('homeSearchForm').addEventListener('submit', function(e) {
    document.getElementById('homeSearchDomain').value = document.getElementById('homeSearchInput').value.trim();
});
</script>
@endpush