<!-- Path: app/Views/contact.view.php -->
<div class="bg-slate-50 py-16 min-h-[calc(100vh-64px)]">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-10">
            <h1 class="text-3xl font-bold text-navy-900 mb-4">Contact Support</h1>
            <p class="text-slate-600">Have questions about the system or want to enroll your agency? Send us a message.</p>
        </div>

        <div class="bg-white rounded-xl shadow-md border border-slate-100 overflow-hidden">
            <div class="p-8">
                <form id="contactForm" method="POST">
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-slate-700 mb-2">Full Name</label>
                        <input type="text" name="name" required class="w-full px-4 py-3 rounded-md border border-slate-300 focus:border-brandBlue-500 focus:ring-2 focus:ring-brandBlue-200 outline-none transition-all">
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-slate-700 mb-2">Email Address</label>
                        <input type="email" name="email" required class="w-full px-4 py-3 rounded-md border border-slate-300 focus:border-brandBlue-500 focus:ring-2 focus:ring-brandBlue-200 outline-none transition-all">
                    </div>
                    
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-slate-700 mb-2">Your Message</label>
                        <textarea name="message" rows="5" required class="w-full px-4 py-3 rounded-md border border-slate-300 focus:border-brandBlue-500 focus:ring-2 focus:ring-brandBlue-200 outline-none transition-all resize-none"></textarea>
                    </div>

                    <button type="submit" id="submitBtn" class="w-full bg-navy-900 hover:bg-navy-800 text-white font-semibold py-3 px-4 rounded-md shadow transition-colors flex items-center justify-center gap-2">
                        <span>Send Message</span>
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </form>
            </div>
            <div class="bg-slate-100 p-6 flex flex-col sm:flex-row justify-between items-center text-sm text-slate-600 border-t border-slate-200">
                <div class="flex items-center gap-2 mb-2 sm:mb-0"><i class="fas fa-envelope text-brandBlue-500"></i> support@ercs.local</div>
                <div class="flex items-center gap-2"><i class="fas fa-phone-alt text-brandBlue-500"></i> +234 800 000 0000</div>
            </div>
        </div>

    </div>
</div>

@addScript
<script>
$(document).ready(function() {
    $('#contactForm').on('submit', function(e) {
        e.preventDefault();
        
        let $btn = $('#submitBtn');
        let originalText = $btn.html();
        
        $btn.html('<i class="fas fa-spinner fa-spin"></i> Sending...').prop('disabled', true);
        
        $.ajax({
            url: '{{APP_URL}}/contact',
            type: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                if(response.status === 'success') {
                    $('#contactForm')[0].reset();
                    showNotification('success', 'Sent!', response.message);
                } else {
                    showNotification('error', 'Error', 'Something went wrong.');
                }
            },
            error: function(xhr) {
                let msg = 'Failed to send message.';
                if(xhr.responseJSON && xhr.responseJSON.errors) {
                    msg = Object.values(xhr.responseJSON.errors)[0][0]; // Show first error
                }
                showNotification('error', 'Validation Error', msg);
            },
            complete: function() {
                $btn.html(originalText).prop('disabled', false);
            }
        });
    });
});
</script>
@endAddScript