@extends('layouts.app')

@section('title', 'Add Domain - TrustSeal Portal')

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Add New Domain</h5>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('domains.store') }}">
                        @csrf

                        <div class="mb-3">
                            <label for="domain_name" class="form-label">Domain Name</label>
                            <input type="url" class="form-control @error('domain_name') is-invalid @enderror" 
                                   id="domain_name" name="domain_name" value="{{ old('domain_name') }}" 
                                   placeholder="https://example.com" required>
                            @error('domain_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Enter the full URL of your website</div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Verification Method</label>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="card verification-method" data-method="dns">
                                        <div class="card-body text-center">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="verification_method" 
                                                       id="dns" value="dns" checked>
                                                <label class="form-check-label" for="dns">
                                                    <i class="fas fa-cogs fa-2x text-primary mb-2 d-block"></i>
                                                    <strong>DNS Record</strong>
                                                </label>
                                            </div>
                                            <small class="text-muted">Add a TXT record to your DNS</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card verification-method" data-method="html_file">
                                        <div class="card-body text-center">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="verification_method" 
                                                       id="html_file" value="html_file">
                                                <label class="form-check-label" for="html_file">
                                                    <i class="fas fa-file-code fa-2x text-success mb-2 d-block"></i>
                                                    <strong>HTML File</strong>
                                                </label>
                                            </div>
                                            <small class="text-muted">Upload a verification file</small>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="card verification-method" data-method="meta_tag">
                                        <div class="card-body text-center">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="verification_method" 
                                                       id="meta_tag" value="meta_tag">
                                                <label class="form-check-label" for="meta_tag">
                                                    <i class="fas fa-code fa-2x text-warning mb-2 d-block"></i>
                                                    <strong>Meta Tag</strong>
                                                </label>
                                            </div>
                                            <small class="text-muted">Add a meta tag to your HTML</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <a href="{{ route('dashboard') }}" class="btn btn-secondary me-md-2">Cancel</a>
                            <button type="submit" class="btn btn-primary">Add Domain</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.verification-method {
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}
.verification-method:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.verification-method.selected {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const methods = document.querySelectorAll('.verification-method');
    const radios = document.querySelectorAll('input[name="verification_method"]');
    
    methods.forEach(method => {
        method.addEventListener('click', function() {
            const radio = this.querySelector('input[type="radio"]');
            radio.checked = true;
            
            methods.forEach(m => m.classList.remove('selected'));
            this.classList.add('selected');
        });
    });
    
    // Set initial selection
    document.querySelector('.verification-method').classList.add('selected');
});
</script>
@endsection