@extends('front::layouts.master')

@section('content')
<div class="contact-page">
    <div class="container">
        <!-- Page Header -->
        <div class="row mb-5">
            <div class="col-12 text-center">
                <h1 class="page-title">Contact Us</h1>
                <p class="page-subtitle">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
            </div>
        </div>

        <div class="row">
            <!-- Contact Information Cards -->
            <div class="col-lg-4 mb-4">
                <div class="contact-cards-wrapper">
                    <!-- Sales Card -->
                    <div class="contact-info-card">
                        <div class="card-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h3>Sales Inquiries</h3>
                        <p>Questions about our products or pricing? Our sales team is here to help.</p>
                        <div class="contact-details">
                            <div class="detail-item">
                                <i class="fas fa-phone-alt"></i>
                                <a href="tel:+1234567890" class="contact-link">+1 (234) 567-890</a>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-envelope"></i>
                                <a href="mailto:sales@aatrral.com" class="contact-link">sales@aatrral.com</a>
                            </div>
                        </div>
                    </div>

                    <!-- Technical Support Card -->
                    <div class="contact-info-card">
                        <div class="card-icon">
                            <i class="fas fa-headset"></i>
                        </div>
                        <h3>Technical Support</h3>
                        <p>Need help with technical issues? Our support team is available 24/7.</p>
                        <div class="contact-details">
                            <div class="detail-item">
                                <i class="fas fa-phone-alt"></i>
                                <a href="tel:+1234567891" class="contact-link">+1 (234) 567-891</a>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-envelope"></i>
                                <a href="mailto:support@aatrral.com" class="contact-link">support@aatrral.com</a>
                            </div>
                        </div>
                    </div>

                    <!-- Feedback Card -->
                    <div class="contact-info-card">
                        <div class="card-icon">
                            <i class="fas fa-comment-alt"></i>
                        </div>
                        <h3>Feedback</h3>
                        <p>We value your feedback. Let us know how we can improve your experience.</p>
                        <div class="contact-details">
                            <div class="detail-item">
                                <i class="fas fa-phone-alt"></i>
                                <a href="tel:+1234567892" class="contact-link">+1 (234) 567-892</a>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-envelope"></i>
                                <a href="mailto:feedback@aatrral.com" class="contact-link">feedback@aatrral.com</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div class="col-lg-8">
                <div class="contact-form-wrapper">
                    <h2 class="form-title">Send us a Message</h2>
                    
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('contact.store') }}" class="contact-form">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="name" class="form-label">Your Name *</label>
                                    <input type="text" 
                                           class="form-control @error('name') is-invalid @enderror" 
                                           id="name" 
                                           name="name" 
                                           value="{{ old('name') }}" 
                                           required>
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="email" class="form-label">Email Address *</label>
                                    <input type="email" 
                                           class="form-control @error('email') is-invalid @enderror" 
                                           id="email" 
                                           name="email" 
                                           value="{{ old('email') }}" 
                                           required>
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="tel" 
                                           class="form-control @error('phone') is-invalid @enderror" 
                                           id="phone" 
                                           name="phone" 
                                           value="{{ old('phone') }}">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <div class="form-group">
                                    <label for="subject" class="form-label">Subject *</label>
                                    <input type="text" 
                                           class="form-control @error('subject') is-invalid @enderror" 
                                           id="subject" 
                                           name="subject" 
                                           value="{{ old('subject') }}" 
                                           required>
                                    @error('subject')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-12 mb-3">
                                <div class="form-group">
                                    <label for="message" class="form-label">Message *</label>
                                    <textarea class="form-control @error('message') is-invalid @enderror" 
                                              id="message" 
                                              name="message" 
                                              rows="5" 
                                              minlength="20" 
                                              maxlength="200" 
                                              required>{{ old('message') }}</textarea>
                                    <div class="character-count">
                                        <span id="charCount">0</span> / 200 characters (minimum 20)
                                    </div>
                                    @error('message')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-12">
                                <button type="submit" class="btn btn-primary submit-btn">
                                    Send Message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Combined Office Information (Replaces redundant location section) -->
        <div class="row mt-5">
            <div class="col-12">
                <div class="office-info-card">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="office-section">
                                <h3><i class="fas fa-map-marker-alt"></i> Visit Us</h3>
                                <p class="address-text">
                                    123 Business Avenue<br>
                                    Suite 100<br>
                                    New York, NY 10001<br>
                                    United States
                                </p>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="office-section">
                                <h3><i class="fas fa-phone"></i> Call Us</h3>
                                <a href="tel:+1234567890" class="office-link">Main: +1 (234) 567-890</a>
                                <a href="tel:+1234567891" class="office-link">Support: +1 (234) 567-891</a>
                                <a href="tel:+1234567892" class="office-link">Feedback: +1 (234) 567-892</a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="office-section">
                                <h3><i class="fas fa-envelope"></i> Email Us</h3>
                                <a href="mailto:info@aatrral.com" class="office-link">info@aatrral.com</a>
                                <a href="mailto:sales@aatrral.com" class="office-link">sales@aatrral.com</a>
                                <a href="mailto:support@aatrral.com" class="office-link">support@aatrral.com</a>
                                <a href="mailto:feedback@aatrral.com" class="office-link">feedback@aatrral.com</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const messageInput = document.getElementById('message');
    const charCount = document.getElementById('charCount');
    
    if (messageInput) {
        // Update character count on load
        charCount.textContent = messageInput.value.length;
        
        // Update character count on input
        messageInput.addEventListener('input', function() {
            charCount.textContent = this.value.length;
            
            // Visual feedback for character count
            if (this.value.length < 20) {
                charCount.style.color = '#dc3545';
            } else if (this.value.length > 200) {
                charCount.style.color = '#dc3545';
            } else {
                charCount.style.color = '#28a745';
            }
        });

        // Prevent submission if message is too short or too long
        const form = document.querySelector('.contact-form');
        form.addEventListener('submit', function(e) {
            if (messageInput.value.length < 20) {
                e.preventDefault();
                alert('Message must be at least 20 characters long.');
            } else if (messageInput.value.length > 200) {
                e.preventDefault();
                alert('Message must not exceed 200 characters.');
            }
        });
    }
});
</script>
@endpush

@push('styles')
<!-- Font Awesome CDN - Added directly in the styles push -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style>
.contact-page {
    padding: 60px 0;
    background: #f8f9fa;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.page-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* Contact Cards Wrapper */
.contact-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Reduced gap between cards */
}

.contact-info-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    cursor: default; /* Remove button-like cursor */
}

.contact-info-card:hover {
    transform: translateY(-3px);
}

.card-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon i {
    font-size: 24px;
    color: white;
}

.contact-info-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.contact-info-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.detail-item i {
    color: #667eea;
    font-size: 14px;
    width: 20px;
}

.contact-link {
    color: #666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    cursor: pointer;
}

.contact-link:hover {
    color: #667eea;
}

/* Contact Form */
.contact-form-wrapper {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.form-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    font-weight: 500;
    color: #555;
    margin-bottom: 8px;
    display: block;
}

.form-control {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 12px 15px;
    width: 100%;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102,126,234,0.25);
    outline: none;
}

.character-count {
    margin-top: 5px;
    font-size: 0.85rem;
    color: #666;
}

#charCount {
    font-weight: 600;
}

.submit-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 12px 30px;
    font-weight: 500;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102,126,234,0.4);
}

/* Office Info Card */
.office-info-card {
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.office-section {
    padding: 0 15px;
}

.office-section h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

.office-section h3 i {
    color: #667eea;
    margin-right: 10px;
}

.address-text {
    color: #666;
    line-height: 1.8;
    font-size: 1rem;
    margin-bottom: 0;
}

.office-link {
    display: block;
    color: #667eea;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.3s ease;
    cursor: pointer;
}

.office-link:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* Alert Styles */
.alert {
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 30px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert ul {
    margin-bottom: 0;
    padding-left: 20px;
}

/* Form Validation Styles */
.is-invalid {
    border-color: #dc3545 !important;
}

.invalid-feedback {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-page {
        padding: 40px 0;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .contact-form-wrapper {
        padding: 30px 20px;
    }
    
    .office-info-card {
        padding: 30px 20px;
    }
    
    .office-section {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .office-section:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 576px) {
    .contact-cards-wrapper {
        gap: 10px;
    }
    
    .contact-info-card {
        padding: 20px;
    }
}
</style>
@endpush
@endsection