@extends('layouts.main')

@push('styles')
<style>
    :root {
        --primary: #818CF8;
        --primary-dark: #4F46E5;
        --bg-dark: #0f121b;
        --card-bg: rgba(22, 27, 43, 0.6);
        --text-glow: 0 0 15px rgba(129, 140, 248, 0.4);
    }

    .domain-container {
        font-family: 'Outfit', sans-serif;
        background-color: var(--bg-dark);
        background-image: 
            radial-gradient(circle at 15% 50%, rgba(99, 102, 241, 0.15), transparent 25%),
            radial-gradient(circle at 85% 30%, rgba(139, 92, 246, 0.15), transparent 25%);
        color: #F3F4F6;
        min-height: 80vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem;
        position: relative;
        overflow: hidden;
    }

    .domain-container::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><rect width="100" height="100" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="1" stroke-dasharray="2 2" /></svg>');
        background-size: 30px 30px;
        z-index: 0;
        pointer-events: none;
    }

    .glass-card {
        position: relative;
        z-index: 1;
        background: var(--card-bg);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        padding: 3.5rem;
        max-width: 650px;
        width: 100%;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: 
            0 25px 50px -12px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: translateY(0);
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    }

    .glass-card:hover {
        transform: translateY(-5px);
        box-shadow: 
            0 30px 60px -12px rgba(0, 0, 0, 0.6),
            0 0 40px rgba(99, 102, 241, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .card-header {
        text-align: center;
        margin-bottom: 3rem;
    }

    .card-header h2 {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 2.5rem;
        font-weight: 800;
        margin-bottom: 1rem;
        color: #FFFFFF;
        letter-spacing: -0.5px;
    }

    .card-header h2 span {
        background: linear-gradient(135deg, #a5b4fc 0%, #818CF8 50%, #6366F1 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: var(--text-glow);
    }

    .card-header p {
        color: #9CA3AF;
        font-size: 1.05rem;
        line-height: 1.6;
        max-width: 80%;
        margin: 0 auto;
    }

    .form-group {
        margin-bottom: 2rem;
    }

    .form-group label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #E5E7EB;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }

    .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .input-wrapper:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
        background: rgba(0, 0, 0, 0.3);
    }

    .prefix {
        padding-left: 1.25rem;
        color: var(--primary);
        font-weight: 700;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.1rem;
        user-select: none;
    }

    .domain-input {
        width: 100%;
        background: transparent;
        border: none;
        padding: 1.25rem 1rem 1.25rem 0.25rem;
        color: #FFFFFF;
        font-size: 1.1rem;
        font-family: 'Outfit', sans-serif;
        outline: none;
        letter-spacing: 0.5px;
    }

    .domain-input::placeholder {
        color: #4B5563;
    }



    .btn-submit {
        width: 100%;
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: white;
        border: none;
        padding: 1.25rem;
        border-radius: 14px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 10px 20px -5px rgba(79, 70, 229, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        position: relative;
        overflow: hidden;
    }

    .btn-submit::after {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 50%; height: 100%;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
        transform: skewX(-20deg);
        transition: left 0.7s ease;
    }

    .btn-submit:hover::after {
        left: 150%;
    }

    .btn-submit:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 25px -5px rgba(79, 70, 229, 0.6);
    }

    .btn-submit:active {
        transform: translateY(1px);
    }
    
    .success-alert {
        background: rgba(16, 185, 129, 0.1);
        border: 1px solid rgba(16, 185, 129, 0.4);
        padding: 1.25rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        color: #10B981;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
        animation: slideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes slideIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
@endpush

@section('content')
<div class="domain-container">
    <div class="glass-card">
        
        <div class="card-header">
            <h2>Quick <span>Add Domain</span></h2>
            <p>Instantly link a new ERP account and practice website.</p>
        </div>

        @if($errors->any())
            <div style="background: rgba(239, 68, 68, 0.15); color: #EF4444; border: 1px solid rgba(239, 68, 68, 0.3); padding: 0.8rem 1rem; border-radius: 12px; margin-bottom: 1.5rem; position: relative; z-index: 1; text-align: left; font-size: 0.85rem;">
                <ul style="margin: 0; padding-left: 1.2rem;">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        @if(session('success'))
            <div class="success-alert">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                {{ session('success') }}
            </div>
        @endif

        <form action="/portal/create-tenant" method="POST">
            @csrf

            <div class="form-group">
                <label>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
                    Psychologist Full Name
                </label>
                <div class="input-wrapper">
                    <input type="text" name="name" class="domain-input" value="{{ old('name') }}" placeholder="e.g. Dr. David Miller" required style="padding-left: 1.25rem;">
                </div>
            </div>

            <div class="form-group">
                <label>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
                    Custom Domain
                </label>
                <div class="input-wrapper">
                    <span class="prefix">www.</span>
                    <input type="text" name="custom_domain" class="domain-input" value="{{ old('custom_domain') }}" placeholder="e.g. drdavidmiller.com" required autocomplete="off">
                </div>
            </div>

            <div class="form-group">
                <label>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                    imhappy ERP Doctor ID
                </label>
                <div class="input-wrapper">
                    <input type="text" name="erp_doctor_id" class="domain-input" value="{{ old('erp_doctor_id') }}" placeholder="e.g. emp_104" required style="padding-left: 1.25rem;">
                </div>
            </div>

            <div class="form-group">
                <label>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
                    Set Admin Password
                </label>
                <div class="input-wrapper">
                    <input type="password" name="password" class="domain-input" placeholder="Create password for admin login" required style="padding-left: 1.25rem;">
                </div>
            </div>

            <button type="submit" class="btn-submit">
                Bind Domain & Launch Site
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            </button>
        </form>

</div>
@endsection