@extends('layouts.app')

@section('title', 'Register a New Domain - SecureSoftPay')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
    /* মেইন লেআউট */
    .page-wrapper { display: flex; max-width: 1400px; margin: 120px auto 50px; gap: 40px; padding: 0 20px; }
    .page-sidebar { width: 280px; flex-shrink: 0; }
    .page-main-content { flex-grow: 1; min-width: 0; }
    .subtitle { color: #666; margin-top: -10px; margin-bottom: 25px; }

    /* সাইডবার স্টাইল */
    .sidebar-block { margin-bottom: 30px; }
    .sidebar-block h3 { font-size: 14px; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; color: #555; letter-spacing: 0.5px; }
    .sidebar-menu { list-style: none; padding-left: 0; }
    .sidebar-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 15px; text-decoration: none; color: #0052cc; font-weight: 500; border-radius: 6px; margin-bottom: 5px; background-color: transparent; transition: 0.2s; }
    .sidebar-menu a:hover { background-color: #f0f5ff; }
    .sidebar-menu a.active { background-color: #eef5ff; font-weight: 600; }
    .sidebar-menu a i { width: 20px; text-align: center; font-size: 14px; }

    /* সার্চ কন্টেইনার (হলুদ ডিজাইন) */
    .domain-search-container { padding: 40px; border-radius: 12px; background-image: linear-gradient(135deg, #ffc107, #ff9800); position: relative; overflow: hidden; margin-bottom: 40px; }
    .domain-search-container::after { content: '\f0ac'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 250px; color: rgba(255, 255, 255, 0.15); position: absolute; right: -50px; top: 50%; transform: translateY(-50%) rotate(15deg); pointer-events: none; }
    
    .search-form-wrapper { background-color: #fff; padding: 8px; border-radius: 8px; display: flex; gap: 8px; max-width: 650px; margin: 0 auto; box-shadow: 0 5px 15px rgba(0,0,0,0.1); position: relative; z-index: 1; }
    .search-form-wrapper input { flex-grow: 1; border: none; padding: 12px 15px; font-size: 16px; border-radius: 6px; outline: none; }
    .search-form-wrapper .btn-search { background-color: #0052cc; color: white; border: none; padding: 0 35px; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.3s; }
    .search-form-wrapper .btn-search:hover { background-color: #0041a3; }

    /* রেজাল্ট বক্স ডিজাইন */
    #domain-search-result { display: none; margin-bottom: 40px; }
    
    /* মূল ডোমেইন রেজাল্ট (Primary) */
    .primary-result-box { text-align: center; padding: 35px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e5e7eb; transition: 0.3s; }
    .primary-result-box.available { background-color: #f0fff4; border-color: #c3e6cb; }
    .primary-result-box.unavailable { background-color: #fff5f5; border-color: #feb2b2; }
    .primary-result-box .main-domain { font-size: 26px; font-weight: 700; color: #333; margin-bottom: 10px; display: block; }
    .primary-result-box .status-text { font-size: 18px; margin-bottom: 15px; color: #444; }
    .primary-result-box .price-tag { font-size: 34px; font-weight: 800; color: #0052cc; margin-bottom: 20px; display: block; }
    .btn-big-cart { background-color: #0052cc; color: white; padding: 14px 45px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 18px; display: inline-block; box-shadow: 0 4px 10px rgba(0,82,204,0.2); }

    /* বাল্ক ও সাজেশন লিস্ট */
    .results-section { margin-bottom: 35px; }
    .results-section-title { font-size: 18px; font-weight: 600; margin-bottom: 15px; color: #444; border-bottom: 1px solid #eee; padding-bottom: 10px; }
    .domain-result-list { list-style: none; padding: 0; }
    .result-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-radius: 8px; margin-bottom: 12px; background-color: #fff; border: 1px solid #e5e7eb; transition: 0.2s; }
    .result-item:hover { border-color: #0052cc; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
    .result-item .domain-name { font-weight: 600; font-size: 17px; color: #333; }
    .result-item .pricing-info { text-align: right; }
    .result-item .price { font-weight: 700; color: #333; font-size: 17px; display: block; }
    .result-item .period { font-size: 12px; color: #777; }
    .btn-add-cart { background-color: #0052cc; color: white; padding: 9px 22px; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; margin-left: 15px; transition: 0.2s; }
    .btn-add-cart:hover { background-color: #0041a3; }

    /* টিএলডি টেবিল */
    .tld-pricing-table table { width: 100%; border-collapse: collapse; margin-top: 20px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
    .tld-pricing-table th, .tld-pricing-table td { padding: 15px; border-bottom: 1px solid #eee; text-align: left; }
    .tld-pricing-table th { background-color: #f8f9fa; color: #555; font-weight: 600; font-size: 14px; text-transform: uppercase; }
    .tld-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; margin-left: 10px; text-transform: uppercase; vertical-align: middle; }
    .badge-sale { background-color: #f0ad4e; color: white; }
    .badge-hot { background-color: #d9534f; color: white; }
    .badge-new { background-color: #5cb85c; color: white; }

    @media (max-width: 992px) { .page-wrapper { flex-direction: column; } .page-sidebar { width: 100%; } .domain-search-container { padding: 25px; } .search-form-wrapper { flex-direction: column; gap: 15px; } }
</style>
@endpush

@section('content')
<div class="page-wrapper">
    <!-- সাইডবার -->
    <aside class="page-sidebar">
        <div class="sidebar-block">
            <h3>Categories</h3>
            <ul class="sidebar-menu">
                @foreach($category_groups as $group)
                <li><a href="{{ route('pricing') }}"><i class="fas fa-server"></i> {{ htmlspecialchars(ucwords($group->name)) }}</a></li>
                @endforeach
            </ul>
        </div>
        <div class="sidebar-block">
            <h3>Actions</h3>
            <ul class="sidebar-menu">
                <li><a href="{{ route('domain-search') }}" class="active"><i class="fas fa-search"></i> Register a New Domain</a></li>
                <li><a href="{{ route('transfer-domain') }}"><i class="fas fa-exchange-alt"></i> Transfer in a Domain</a></li>
                <li><a href="{{ route('checkout.show') }}"><i class="fas fa-shopping-cart"></i> View Cart</a></li>
            </ul>
        </div>
    </aside>

    <!-- মেইন কন্টেন্ট -->
    <main class="page-main-content">
        <h1>Register Domain</h1>
        <p class="subtitle">Find your new domain name. Enter your name or keywords below to check availability.</p>

        <!-- হলুদ সার্চ বক্স -->
        <div class="domain-search-container">
            <form id="domain-search-form" class="search-form-wrapper">
                <input type="text" id="domain_name_input" name="domain_name" placeholder="Find your new domain name" required autocomplete="off">
                <button type="submit" class="btn-search">Search</button>
            </form>
        </div>

        <!-- সার্চ রেজাল্ট এলাকা -->
        <div id="domain-search-result">
            <div id="primary-container"></div>
            <div id="other-results-container"></div>
            <div id="suggestion-container"></div>
        </div>

        <!-- টিএলডি প্রাইসিং টেবিল -->
        <div class="tld-pricing-table">
            <h2>Domain Pricing</h2>
            <div style="overflow-x:auto; margin-top: 15px;">
                <table>
                    <thead>
                        <tr>
                            <th>Domain</th>
                            <th>New Price</th>
                            <th>Transfer</th>
                            <th>Renewal</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tlds_result as $tld)
                            @php
                                $reg_info = $tld->getShortestPeriodPrice('register');
                                $trans_info = $tld->getShortestPeriodPrice('transfer');
                                $renew_info = $tld->getShortestPeriodPrice('renew');
                                $badge = $tld->badge ?? 'none';
                            @endphp
                            <tr>
                                <td>
                                    <strong>{{ htmlspecialchars($tld->tld) }}</strong>
                                    @if ($badge !== 'none')
                                        <span class="tld-badge badge-{{ htmlspecialchars($badge) }}">{{ strtoupper(htmlspecialchars($badge)) }}</span>
                                    @endif
                                </td>
                                <td>৳{{ number_format($reg_info['price'], 2) }} BDT<br><small>{{ $reg_info['period_text'] }}</small></td>
                                <td>৳{{ number_format($trans_info['price'], 2) }} BDT<br><small>{{ $trans_info['period_text'] }}</small></td>
                                <td>৳{{ number_format($renew_info['price'], 2) }} BDT<br><small>{{ $renew_info['period_text'] }}</small></td>
                            </tr>
                        @empty
                            <tr><td colspan="4" style="text-align: center; padding: 30px;">No TLD pricing configured yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </main>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchForm = document.getElementById('domain-search-form');
    const domainInput = document.getElementById('domain_name_input');
    const resultDiv = document.getElementById('domain-search-result');
    const primaryBox = document.getElementById('primary-container');
    const otherBox = document.getElementById('other-results-container');
    const suggBox = document.getElementById('suggestion-container');

    searchForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const domainName = domainInput.value.trim();
        if (!domainName) return;

        // UI রিসেট এবং লোডার দেখানো
        resultDiv.style.display = 'block';
        primaryBox.innerHTML = `<p style="text-align:center; padding: 20px; background:#fff; border-radius:12px; border:1px solid #eee;"><i class="fas fa-spinner fa-spin"></i> Checking availability for <strong>${domainName}</strong>...</p>`;
        otherBox.innerHTML = '';
        suggBox.innerHTML = '';

        // Laravel রুটের URL ব্যবহার করে API কল
        fetch(`{{ route('ajax.bulk.search') }}?domain_name=${encodeURIComponent(domainName)}`)
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw new Error(err.message || 'Server error occurred.'); });
                }
                return response.json();
            })
            .then(data => {
                if (!data.success) {
                    primaryBox.innerHTML = `<div style="background:#f8d7da; color:#721c24; padding:15px; border-radius:8px; border:1px solid #f5c6cb;">${data.message || 'An unknown error occurred.'}</div>`;
                    return;
                }
                
                primaryBox.innerHTML = '';
                otherBox.innerHTML = '';

                // ১. মেইন ডোমেইন রেজাল্ট (Primary Result Box)
                if (data.primary_result) {
                    const p = data.primary_result;
                    const checkoutUrl = `{{ route('checkout.domain.first') }}?domain=${encodeURIComponent(p.domain)}`;
                    primaryBox.innerHTML = `
                        <div class="primary-result-box ${p.available ? 'available' : 'unavailable'}">
                            <span class="main-domain">${p.domain}</span>
                            <p class="status-text">${p.available ? 'Congratulations! This domain is available.' : 'Sorry! This domain is already taken.'}</p>
                            ${p.available ? `<span class="price-tag">৳${p.price} BDT</span><a href="${checkoutUrl}" class="btn-big-cart">Add to Cart</a>` : ''}
                        </div>
                    `;
                }

                // ২. অন্যান্য TLD রেজাল্ট (বাল্ক থেকে)
                if (data.other_results && data.other_results.length > 0) {
                    let html = '<div class="results-section"><h2 class="results-section-title">Other Available Options</h2><ul class="domain-result-list">';
                    data.other_results.forEach(item => {
                        const cUrl = `{{ route('checkout.domain.first') }}?domain=${encodeURIComponent(item.domain)}`;
                        html += `
                            <li class="result-item">
                                <span class="domain-name">${item.domain}</span>
                                <div style="display:flex; align-items:center;">
                                    <div class="pricing-info"><span class="price">৳${item.price} BDT</span><span class="period">${item.period}</span></div>
                                    <a href="${cUrl}" class="btn-add-cart">Add to Cart</a>
                                </div>
                            </li>`;
                    });
                    html += '</ul></div>';
                    otherBox.innerHTML = html;
                }

                // ৩. সাজেশন্স (যদি থাকে)
                if (data.suggestions && data.suggestions.length > 0) {
                    // সাজেশনস প্রদর্শনের জন্য কোড এখানে যোগ করা যেতে পারে
                }
            })
            .catch(error => {
                primaryBox.innerHTML = `<div style="background:#f8d7da; color:#721c24; padding:15px; border-radius:8px; border:1px solid #f5c6cb;">Error: ${error.message}</div>`;
            });
    });
});
</script>
@endpush```