@extends('admin.master')

@section('content')
<div class="container mx-auto px-4 py-8 flex justify-center">
    
    <div class="w-full max-w-4xl">
        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4 shadow-sm">
                {{ session('success') }}
            </div>
        @endif
        
        @if ($errors->any())
            <div class="bg-red-100 text-red-700 px-4 py-3 rounded mb-4 shadow-sm">
                <ul class="list-disc pl-5">@foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach</ul>
            </div>
        @endif

        <!-- Gradient Banner Header -->
        <div class="bg-gradient-to-r from-[#F17321] to-[#FFC340] rounded-t-xl py-5 text-center shadow-sm">
            <h2 class="text-2xl font-extrabold text-black tracking-wide">Manage Your Custom Domain</h2>
        </div>

        <!-- Main Content Body -->
        <div class="bg-white rounded-b-xl shadow-md p-8 min-h-[500px]">
            
            <h3 class="text-2xl font-bold text-center text-gray-800 mb-10">Connect Your Custom Domain</h3>

            <!-- Dynamic Stepper -->
            @php
                // Colors based on current step
                $s1Color = $step >= 1 ? 'bg-[#F59E0B] text-white shadow-md' : 'bg-gray-200 text-gray-500';
                $s2Color = $step >= 2 ? 'bg-[#F59E0B] text-white shadow-md' : 'bg-gray-200 text-gray-500';
                $s3Color = $step >= 3 ? 'bg-[#F59E0B] text-white shadow-md' : 'bg-gray-200 text-gray-500';
                
                $t1Color = $step >= 1 ? 'text-[#F59E0B]' : 'text-gray-400';
                $t2Color = $step >= 2 ? 'text-[#F59E0B]' : 'text-gray-400';
                $t3Color = $step >= 3 ? 'text-[#F59E0B]' : 'text-gray-400';

                $l1Color = $step >= 2 ? 'bg-[#F59E0B]' : 'bg-gray-300';
                $l2Color = $step >= 3 ? 'bg-[#F59E0B]' : 'bg-gray-300';
            @endphp

            <div class="flex items-center justify-center mb-14 max-w-2xl mx-auto">
                <!-- Step 1 -->
                <div class="flex flex-col items-center relative">
                    <div class="w-10 h-10 rounded-full {{ $s1Color }} flex items-center justify-center font-bold z-10 transition-colors duration-300">
                        @if($step > 1) <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> @else 1 @endif
                    </div>
                    <span class="{{ $t1Color }} font-bold text-sm mt-3 absolute top-10 whitespace-nowrap transition-colors duration-300">Enter Domain</span>
                </div>
                
                <!-- Line 1 -->
                <div class="flex-1 h-1 {{ $l1Color }} mx-2 -mt-6 transition-colors duration-300"></div>
                
                <!-- Step 2 -->
                <div class="flex flex-col items-center relative">
                    <div class="w-10 h-10 rounded-full {{ $s2Color }} flex items-center justify-center font-bold z-10 transition-colors duration-300">
                        @if($step > 2) <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg> @else 2 @endif
                    </div>
                    <span class="{{ $t2Color }} font-medium text-sm mt-3 absolute top-10 whitespace-nowrap transition-colors duration-300">Update Nameserver</span>
                </div>

                <!-- Line 2 -->
                <div class="flex-1 h-1 {{ $l2Color }} mx-2 -mt-6 transition-colors duration-300"></div>

                <!-- Step 3 -->
                <div class="flex flex-col items-center relative">
                    <div class="w-10 h-10 rounded-full {{ $s3Color }} flex items-center justify-center font-bold z-10 transition-colors duration-300">
                        3
                    </div>
                    <span class="{{ $t3Color }} font-medium text-sm mt-3 absolute top-10 whitespace-nowrap transition-colors duration-300">Connected</span>
                </div>
            </div>

            <!-- ================= STEP 1: Enter Domain ================= -->
            @if($step == 1)
            <div class="border border-gray-200 rounded-xl p-8 max-w-3xl mx-auto bg-gray-50/50">
                <form action="{{ route('admin.custom-domain.store') }}" method="POST">
                    @csrf
                    <div class="flex items-center gap-2 mb-4">
                        <svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path></svg>
                        <h4 class="text-lg font-bold text-gray-700">Enter your domain name</h4>
                    </div>

                    <div class="bg-[#F0F7FF] border-l-4 border-blue-400 p-4 rounded-r-md mb-6 flex items-start">
                        <p class="text-sm text-[#2563EB]">
                            <span class="font-bold">How it works:</span> Enter your domain below. We'll give you nameservers to update at your domain registrar.
                        </p>
                    </div>

                    <div class="mb-6">
                        <label class="block text-sm font-semibold text-gray-700 mb-2">Domain Name</label>
                        <input type="text" name="domain_name" value="{{ old('domain_name') }}" placeholder="example.com" class="w-full border border-gray-300 rounded-md px-4 py-3 outline-none focus:border-[#F59E0B] focus:ring-1 focus:ring-[#F59E0B] text-gray-700 transition-all" required>
                        <p class="text-xs text-gray-500 mt-2">Please enter a valid domain name without http/https (e.g., example.com)</p>
                    </div>

                    <div class="flex justify-end">
                        <button type="submit" class="bg-gradient-to-r from-[#FBBF24] to-[#F59E0B] hover:from-[#F59E0B] hover:to-[#D97706] text-white font-bold py-3 px-8 rounded-md shadow transition-colors">
                            Next: Update Nameservers
                        </button>
                    </div>
                </form>
            </div>
            @endif

            <!-- ================= STEP 2: Update Nameserver ================= -->
            @if($step == 2)
            <div class="border border-gray-200 rounded-xl p-8 max-w-3xl mx-auto bg-white shadow-sm">
                <div class="text-center mb-6">
                    <h4 class="text-xl font-bold text-gray-800">Update Nameservers for <span class="text-[#F59E0B]">{{ $customDomain->domain_name }}</span></h4>
                    <p class="text-sm text-gray-500 mt-2">Log in to your domain registrar (e.g., Namecheap, GoDaddy) and replace your current nameservers with the ones below.</p>
                </div>

                <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 mb-6">
                    <div class="mb-4">
                        <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Nameserver 1</p>
                        <div class="flex justify-between items-center bg-white border border-gray-300 rounded p-3">
                            <code class="text-gray-800 font-bold">ns1.nebuloid.com</code>
                        </div>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1">Nameserver 2</p>
                        <div class="flex justify-between items-center bg-white border border-gray-300 rounded p-3">
                            <code class="text-gray-800 font-bold">ns2.nebuloid.com</code>
                        </div>
                    </div>
                </div>

                <div class="bg-yellow-50 text-yellow-800 text-sm p-4 rounded-lg mb-8 flex gap-3 items-start border border-yellow-200">
                    <svg class="w-6 h-6 shrink-0 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
                    <p>DNS changes can take up to 24-48 hours to propagate globally. Once updated, click the verify button below.</p>
                </div>

                <div class="flex justify-between items-center">
                    <form action="{{ route('admin.custom-domain.destroy') }}" method="POST">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-red-500 hover:text-red-700 font-semibold text-sm underline">Cancel & Remove Domain</button>
                    </form>
                    
                    <form action="{{ route('admin.custom-domain.verify') }}" method="POST">
                        @csrf
                        <button type="submit" class="bg-gradient-to-r from-[#FBBF24] to-[#F59E0B] hover:from-[#F59E0B] hover:to-[#D97706] text-white font-bold py-3 px-8 rounded-md shadow flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg> Verify Connection
                        </button>
                    </form>
                </div>
            </div>
            @endif

            <!-- ================= STEP 3: Connected ================= -->
            @if($step == 3)
            <div class="border border-green-200 rounded-xl p-10 max-w-3xl mx-auto bg-green-50/30 text-center">
                <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg class="w-10 h-10 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                </div>
                
                <h4 class="text-2xl font-bold text-gray-800 mb-2">Domain Successfully Connected!</h4>
                <p class="text-gray-600 mb-8">Your domain <span class="font-bold text-[#F59E0B]">{{ $customDomain->domain_name }}</span> is now active and routing traffic to your storefront.</p>

                <div class="flex justify-center gap-4">
                    <a href="http://{{ $customDomain->domain_name }}" target="_blank" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2.5 px-6 rounded-md shadow flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg> Visit Store
                    </a>

                    <form action="{{ route('admin.custom-domain.destroy') }}" method="POST" onsubmit="return confirm('Are you sure you want to disconnect this domain? Your store will fall back to the default URL.');">
                        @csrf @method('DELETE')
                        <button type="submit" class="border border-red-300 text-red-600 hover:bg-red-50 font-bold py-2.5 px-6 rounded-md transition-colors">
                            Disconnect Domain
                        </button>
                    </form>
                </div>
            </div>
            @endif

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