@extends('storefront.layouts.main')

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

@section('content')
<!-- Hero Section -->
<div class="row">
    <div class="col-md-12">
        <div class="portlet box red">
            <div class="portlet-title">
                <div class="caption"><h2 class="no-margin">Transfer Your Domain</h2></div>
            </div>
            <div class="portlet-body" style="padding: 30px;">
                <h4 class="text-center">Move your domain to us and enjoy better management, pricing, and support.</h4>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8 col-md-offset-2">
            <!-- Info Section -->
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-info-circle font-blue"></i>
                        <span class="caption-subject font-blue bold uppercase">How Domain Transfer Works</span>
                    </div>
                </div>
                <div class="portlet-body">
                    <ol style="font-size: 14px; line-height: 2;">
                        <li>Unlock your domain at your current registrar and disable WHOIS privacy/protection.</li>
                        <li>Obtain the <strong>Authorization/EPP Code</strong> from your current registrar.</li>
                        <li>Enter your domain name and authorization code below to begin the transfer.</li>
                        <li>Approve the transfer confirmation email sent to the domain's admin contact.</li>
                        <li>The transfer typically completes within 5-7 days.</li>
                    </ol>
                    <div class="alert alert-warning" style="margin-top: 15px; margin-bottom: 0;">
                        <i class="fa fa-exclamation-triangle"></i>
                        Your domain must have been registered or previously transferred more than 60 days ago to be eligible for transfer.
                    </div>
                </div>
            </div>

            <!-- Transfer Form -->
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption">
                        <i class="fa fa-exchange font-blue"></i>
                        <span class="caption-subject font-blue bold uppercase">Transfer a Domain</span>
                    </div>
                </div>
                <div class="portlet-body">
                    @if(session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    <form action="{{ auth()->check() ? route('client.cart.add') : route('cart.add.guest') }}" method="POST" id="transferForm">
                        @csrf
                        <input type="hidden" name="item_type" value="domain_transfer">
                        <input type="hidden" name="tld" id="tld_hidden" value="{{ $tlds->first()->tld ?? '.com' }}">
                        <input type="hidden" name="domain" id="domain_full" value="">

                        <div class="form-group">
                            <label class="control-label">Domain Name <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input type="text" id="domain_input" class="form-control" placeholder="yourdomain" required value="{{ old('domain') }}">
                                <span class="input-group-addon" style="padding: 0; border: 0; background: none;">
                                    <select id="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('tld_hidden').value = this.value;">
                                        @foreach($tlds as $tld)
                                            <option value="{{ $tld->tld }}" {{ old('tld_select') == $tld->tld ? 'selected' : '' }}>{{ $tld->tld }}</option>
                                        @endforeach
                                    </select>
                                </span>
                            </div>
                            @error('domain')
                                <span class="help-block text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label class="control-label">Authorization/EPP Code <span class="text-danger">*</span></label>
                            <input type="text" name="auth_code" class="form-control" placeholder="Enter your EPP/Authorization code" required value="{{ old('auth_code') }}">
                            <span class="help-block">This code is provided by your current domain registrar to authorize the transfer.</span>
                            @error('auth_code')
                                <span class="help-block text-danger">{{ $message }}</span>
                            @enderror
                        </div>

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

@push('scripts')
<script>
    document.getElementById('transferForm').addEventListener('submit', function(e) {
        var sld = document.getElementById('domain_input').value.trim();
        var tld = document.getElementById('tld_select').value;
        document.getElementById('domain_full').value = sld + tld;
        document.getElementById('tld_hidden').value = tld;
    });
</script>
@endpush