@extends('storefront.layouts.main')

@section('title', 'Choose a Domain')

@section('content')
<!-- Hero Section -->
<div class="bg-blue text-center" style="background: linear-gradient(135deg, #3598dc, #2f5fa1); color: #fff; padding: 60px 0;">
    <div class="container">
        <h1>Choose a Domain</h1>
        <p class="font-white" style="font-size: 18px; margin-bottom: 0; opacity: 0.9;">Every hosting account needs a domain. Choose how you'd like to get one.</p>
    </div>
</div>

<div class="container" style="padding-top: 40px; padding-bottom: 40px;">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">

            @if(session('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif

            <div class="panel-group" id="domainAccordion">

                <!-- Section 1: Register a New Domain -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#domainAccordion" href="#collapseRegister">
                                <i class="fa fa-plus-circle font-blue"></i> Register a New Domain
                            </a>
                        </h4>
                    </div>
                    <div id="collapseRegister" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <p class="font-grey-mint" style="margin-bottom: 20px;">Search for a new domain name and register it alongside your hosting.</p>
                            <form action="{{ route('storefront.domain.search') }}" method="GET" id="registerDomainForm">
                                <input type="hidden" name="product_id" value="{{ $product_id }}">
                                <input type="hidden" name="billing_cycle_id" value="{{ $billing_cycle_id }}">
                                <input type="hidden" name="domain" id="register_domain_full" value="">

                                <div class="form-group">
                                    <label class="control-label">Domain Name</label>
                                    <div class="input-group">
                                        <input type="text" id="register_domain_input" class="form-control" placeholder="Enter your desired domain name" required>
                                        <span class="input-group-addon" style="padding: 0; border: 0; background: none;">
                                            <select id="register_tld_select" class="no-uniform" style="border: 1px solid #ccc; border-left: 0; border-radius: 0; height: 34px; padding: 0 8px; 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-success">
                                                <i class="fa fa-search"></i> Check Availability
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Section 2: Transfer Your Domain -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#domainAccordion" href="#collapseTransfer" class="collapsed">
                                <i class="fa fa-exchange font-blue"></i> Transfer Your Domain
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTransfer" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p class="font-grey-mint" style="margin-bottom: 20px;">Transfer your existing domain from another registrar and link it to your hosting.</p>
                            <form action="{{ auth()->check() ? route('client.cart.add') : route('cart.add.guest') }}" method="POST" id="transferDomainForm">
                                @csrf
                                <input type="hidden" name="item_type" value="domain_transfer">
                                <input type="hidden" name="product_id" value="{{ $product_id }}">
                                <input type="hidden" name="billing_cycle_id" value="{{ $billing_cycle_id }}">
                                <input type="hidden" name="tld" id="transfer_tld_hidden" value="{{ $tlds->first()->tld ?? '.com' }}">
                                <input type="hidden" name="domain" id="transfer_domain_full" value="">

                                <div class="form-group">
                                    <label class="control-label">Domain Name</label>
                                    <div class="input-group">
                                        <input type="text" id="transfer_domain_input" class="form-control" placeholder="yourdomain" required>
                                        <span class="input-group-addon" style="padding: 0; border: 0; background: none;">
                                            <select id="transfer_tld_select" class="no-uniform" style="border: 1px solid #ccc; border-left: 0; border-radius: 0 4px 4px 0; height: 34px; padding: 0 8px; outline: none; -webkit-appearance: menulist; appearance: menulist; background: #fff; cursor: pointer;" onchange="document.getElementById('transfer_tld_hidden').value = this.value;">
                                                @foreach($tlds as $tld)
                                                    <option value="{{ $tld->tld }}">{{ $tld->tld }}</option>
                                                @endforeach
                                            </select>
                                        </span>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label">Authorization/EPP Code</label>
                                    <input type="text" name="auth_code" class="form-control" placeholder="Enter your EPP/Authorization code" required>
                                </div>

                                <div class="form-group text-right">
                                    <button type="submit" class="btn btn-success">
                                        <i class="fa fa-shopping-cart"></i> Add to Cart
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Section 3: Use Existing Domain -->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#domainAccordion" href="#collapseExisting" class="collapsed">
                                <i class="fa fa-globe font-blue"></i> Use Existing Domain
                            </a>
                        </h4>
                    </div>
                    <div id="collapseExisting" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p class="font-grey-mint" style="margin-bottom: 20px;">Already own a domain? Simply point it to our nameservers to use with your hosting. No transfer required.</p>
                            <form action="{{ auth()->check() ? route('client.cart.add') : route('cart.add.guest') }}" method="POST">
                                @csrf
                                <input type="hidden" name="item_type" value="existing_domain">
                                <input type="hidden" name="product_id" value="{{ $product_id }}">
                                <input type="hidden" name="billing_cycle_id" value="{{ $billing_cycle_id }}">

                                <div class="form-group">
                                    <label class="control-label">Domain Name</label>
                                    <input type="text" name="domain" class="form-control" placeholder="e.g. yourdomain.com" required>
                                    <span class="help-block">
                                        <i class="fa fa-info-circle"></i>
                                        You will need to update your domain's nameservers at your current registrar to point to our nameservers for the hosting to work.
                                    </span>
                                </div>

                                <div class="form-group text-right">
                                    <button type="submit" class="btn btn-success">
                                        <i class="fa fa-shopping-cart"></i> Add to Cart
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Register form: combine domain + tld on submit
    var registerForm = document.getElementById('registerDomainForm');
    if (registerForm) {
        registerForm.addEventListener('submit', function(e) {
            var sld = document.getElementById('register_domain_input').value.trim();
            var tld = document.getElementById('register_tld_select').value;
            document.getElementById('register_domain_full').value = sld + tld;
        });
    }

    // Transfer form: combine domain + tld on submit
    var transferForm = document.getElementById('transferDomainForm');
    if (transferForm) {
        transferForm.addEventListener('submit', function(e) {
            var sld = document.getElementById('transfer_domain_input').value.trim();
            var tld = document.getElementById('transfer_tld_select').value;
            document.getElementById('transfer_domain_full').value = sld + tld;
            document.getElementById('transfer_tld_hidden').value = tld;
        });
    }
</script>
@endpush