@extends('layouts.app')

@section('title', 'Contact Us')

@section('content')
<div class="container py-5">
    {{-- Page Header --}}
    <div class="text-center mb-5">
        <h1 class="display-4 fw-800 mb-3">Contact Us</h1>
        <p class="text-muted lead mb-0">
            Have a question or feedback? We'd love to hear from you.
        </p>
    </div>

    <div class="row g-4">
        {{-- Contact Form --}}
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 p-md-5">
                    {{-- Success Message --}}
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    {{-- Error Alert --}}
                    @if($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <strong>Please fix the following errors:</strong>
                            <ul class="mb-0 mt-1">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <h5 class="fw-700 mb-4">
                        <i class="fas fa-paper-plane text-primary me-2"></i>Send Us a Message
                    </h5>

                    <form action="{{ route('contact.store') }}"
                          method="POST"
                          id="contactForm">
                        @csrf

                        {{-- Honeypot Field (hidden from users, catches bots) --}}
                        <div
                            aria-hidden="true"
                            style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;"
                        >
                            <label for="website">
                                {{ __('Website') }}
                            </label>

                            <input
                                id="website"
                                type="text"
                                name="website"
                                value=""
                                tabindex="-1"
                                autocomplete="off"
                            >
                        </div>

                        <div class="row g-3">
                            {{-- Name --}}
                            <div class="col-md-6">
                                <label for="name" class="form-label fw-600">
                                    Your Name <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white">
                                        <i class="fas fa-user text-muted"></i>
                                    </span>
                                    <input type="text"
                                           id="name"
                                           name="name"
                                           class="form-control @error('name') is-invalid @enderror"
                                           value="{{ old('name', $defaultName) }}"
                                           required
                                           minlength="2"
                                           maxlength="255"
                                           placeholder="John Doe">
                                    @error('name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Email --}}
                            <div class="col-md-6">
                                <label for="email" class="form-label fw-600">
                                    Email Address <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <span class="input-group-text bg-white">
                                        <i class="fas fa-envelope text-muted"></i>
                                    </span>
                                    <input type="email"
                                           id="email"
                                           name="email"
                                           class="form-control @error('email') is-invalid @enderror"
                                           value="{{ old('email', $defaultEmail) }}"
                                           required
                                           maxlength="255"
                                           placeholder="you@example.com">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            {{-- Message --}}
                            <div class="col-12">
                                <label for="message" class="form-label fw-600">
                                    Message <span class="text-danger">*</span>
                                </label>
                                <textarea id="message"
                                          name="message"
                                          class="form-control @error('message') is-invalid @enderror"
                                          rows="6"
                                          required
                                          minlength="10"
                                          maxlength="5000"
                                          placeholder="Please describe your question or feedback in detail...">{{ old('message') }}</textarea>
                                @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <div class="d-flex justify-content-between mt-1">
                                    <small class="text-muted">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Minimum 10 characters.
                                    </small>
                                    <small class="text-muted">
                                        <span id="charCount">0</span> / 5,000
                                    </small>
                                </div>
                            </div>

                            {{-- Submit --}}
                            <div class="col-12">
                                <div class="d-flex flex-wrap align-items-center gap-2">
                                    <button type="submit" class="btn btn-primary" id="submitBtn">
                                        <i class="fas fa-paper-plane me-1"></i> Send Message
                                    </button>
                                    <button type="reset" class="btn btn-outline-secondary">
                                        <i class="fas fa-undo me-1"></i> Reset
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Contact Information Sidebar --}}
        <div class="col-lg-4">
            {{-- Contact Info --}}
            <div class="card border-0 shadow-sm mb-3">
                <div class="card-body">
                    <h6 class="fw-700 mb-3">
                        <i class="fas fa-info-circle text-primary me-2"></i>Contact Information
                    </h6>

                    <div class="d-flex align-items-start gap-3 mb-3">
                        <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:40px;height:40px;">
                            <i class="fas fa-envelope text-primary"></i>
                        </div>
                        <div>
                            <div class="text-muted small">Email</div>
                            <div class="fw-600">
                                <a href="mailto:{{ config('mail.from.address') }}"
                                   class="text-decoration-none text-dark">
                                    {{ config('mail.from.address') }}
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex align-items-start gap-3 mb-3">
                        <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:40px;height:40px;">
                            <i class="fas fa-phone text-success"></i>
                        </div>
                        <div>
                            <div class="text-muted small">Phone</div>
                            <div class="fw-600">
                                <a href="tel:{{ config('app.phone', '+2349065000057') }}"
                                   class="text-decoration-none text-dark">
                                    {{ config('app.phone', '+2349065000057') }}
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex align-items-start gap-3">
                        <div class="rounded-circle bg-warning bg-opacity-10 d-flex align-items-center justify-content-center flex-shrink-0"
                             style="width:40px;height:40px;">
                            <i class="fas fa-map-marker-alt text-warning"></i>
                        </div>
                        <div>
                            <div class="text-muted small">Address</div>
                            <div class="fw-600">
                                {{ config('app.address', '3 Chris Anizo Close, Off DLA') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Response Time --}}
            <div class="alert alert-info">
                <h6 class="fw-700 mb-2">
                    <i class="fas fa-clock me-2"></i>Response Time
                </h6>
                <p class="mb-0 small">
                    We typically respond to all inquiries within
                    <strong>24-48 business hours</strong>. For urgent matters,
                    please use our support ticket system.
                </p>
            </div>

            {{-- Support Link --}}
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h6 class="fw-700 mb-3">
                        <i class="fas fa-headset text-primary me-2"></i>Need Urgent Help?
                    </h6>
                    <p class="text-muted small mb-3">
                        Open a support ticket for faster assistance with orders,
                        payments, or account issues.
                    </p>
                    <a href="{{ route('guest-support.create') }}"
                       class="btn btn-outline-primary w-100">
                        <i class="fas fa-ticket-alt me-1"></i> Open Support Ticket
                    </a>
                </div>
            </div>

            {{-- Help Center Link --}}
            <div class="card border-0 shadow-sm mt-3">
                <div class="card-body">
                    <h6 class="fw-700 mb-3">
                        <i class="fas fa-book text-primary me-2"></i>Help Center
                    </h6>
                    <p class="text-muted small mb-3">
                        Browse our knowledge base for instant answers to common questions.
                    </p>
                    <a href="{{ route('help.index') }}"
                       class="btn btn-outline-secondary w-100">
                        <i class="fas fa-question-circle me-1"></i> Visit Help Center
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .fw-800 { font-weight: 800; }
    textarea#message {
        min-height: 180px;
        resize: vertical;
    }
    .input-group-text {
        border-right: 0;
    }
    .input-group .form-control {
        border-left: 0;
    }
    .input-group .form-control:focus {
        border-left: 1px solid var(--bs-primary);
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Character counter for message textarea
    var messageInput = document.getElementById('message');
    var charCount = document.getElementById('charCount');
    var form = document.getElementById('contactForm');
    var submitBtn = document.getElementById('submitBtn');

    if (messageInput && charCount) {
        var updateCount = function() {
            var length = messageInput.value.length;
            charCount.textContent = length.toLocaleString();

            // Color feedback
            var parent = charCount.parentElement;
            parent.classList.toggle('text-danger', length > 4800);
            parent.classList.toggle('text-warning', length > 4400 && length <= 4800);
            parent.classList.toggle('text-muted', length <= 4400);
        };
        messageInput.addEventListener('input', updateCount);
        updateCount();
    }

    // Prevent double submission
    if (form && submitBtn) {
        form.addEventListener('submit', function() {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Sending...';
        });
    }

    // Warn about unsaved changes
    var formChanged = false;
    var saved = false;

    if (form) {
        form.addEventListener('change', function() {
            formChanged = true;
        });

        form.addEventListener('submit', function() {
            saved = true;
        });

        window.addEventListener('beforeunload', function(e) {
            if (formChanged && !saved) {
                e.preventDefault();
                e.returnValue = '';
            }
        });
    }
});
</script>
@endpush