@extends('storefront.layouts.main')

@section('title', 'Domain Registration')

@section('content')
<!-- Hero Section -->
<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 perfect domain name and get online today.</h4>

                <!-- Domain Search Form -->
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <form action="{{ route('storefront.domain.search') }}" method="GET" id="domainSearchForm">
                            <input type="hidden" name="domain" id="search_domain_full" value="">
                            <div class="input-group input-group-lg">
                                <input type="text" id="search_domain_input" placeholder="Enter your desired domain name..." value="{{ request('domain') }}" required class="form-control">
                                <span class="input-group-addon" style="padding: 0; border: 0; background: none;">
                                    <select id="search_tld_select" class="no-uniform" style="border: 1px solid #ccc; border-left: 0; border-radius: 0; height: 46px; font-size: 16px; padding: 0 10px; outline: none; -webkit-appearance: menulist; appearance: menulist; background: #fff; cursor: pointer;">
                                        @foreach($tlds as $tld)
                                            <option value="{{ $tld->tld }}">{{ $tld->tld }}</option>
                                        @endforeach
                                    </select>
                                </span>
                                <span class="input-group-btn">
                                    <button type="submit" class="btn btn-warning" style="font-weight: 600;">Search</button>
                                </span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- TLD Pricing Grid -->
<div class="row">
    <div class="col-md-12">
        <div class="text-center" style="margin-bottom: 30px;">
            <h2>Available Extensions</h2>
            <p class="font-grey-mint">Choose from a wide range of top-level domains</p>
        </div>

    @if($tlds->count())
        <div class="row">
            @foreach($tlds as $tld)
                <div class="col-md-4" style="margin-bottom: 20px;">
                    <div class="portlet light text-center">
                        <div class="portlet-body">
                            <h3 style="color: #3598dc; font-weight: bold;">{{ $tld->tld }}</h3>
                            @if($tld->pricing->isNotEmpty())
                                <p class="font-grey-mint font-sm" style="margin-bottom: 5px;">Starting from</p>
                                <p style="font-size: 28px; font-weight: bold; margin-bottom: 15px;">
                                    {{ $selectedCurrency->symbol ?? '৳' }}{{ number_format($tld->pricing->first()->register_price, 2) }}
                                    <span class="font-grey-mint font-sm" style="font-weight: normal;">/yr</span>
                                </p>
                                <a href="{{ route('storefront.domain.search', ['domain' => 'example' . $tld->tld]) }}"
                                   class="btn btn-primary">
                                    Register
                                </a>
                            @else
                                <p class="font-grey-mint" style="margin-bottom: 15px;">Pricing not available</p>
                                <span class="font-grey-mint">Contact us</span>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @else
        <div class="text-center" style="padding: 40px 0;">
            <p class="font-grey-mint" style="font-size: 16px;">No TLD extensions available at this time.</p>
        </div>
    @endif
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('domainSearchForm').addEventListener('submit', function(e) {
        var sld = document.getElementById('search_domain_input').value.trim();
        var tld = document.getElementById('search_tld_select').value;
        // If user already typed a full domain (e.g., "example.com"), use as-is
        if (sld.indexOf('.') !== -1) {
            document.getElementById('search_domain_full').value = sld;
        } else {
            document.getElementById('search_domain_full').value = sld + tld;
        }
    });
</script>
@endpush