{{include "header.html"}}
{{include "nav.html"}}

{{$single := .Single}}
<section class="bg-gray-900 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">
                {{if $single}}{{$single.Name}}{{else}}Contact Us{{end}}
            </h1>
            <p class="text-lg text-gray-400 max-w-2xl mx-auto">
                {{if and $single $single.Description}}{{$single.Description}}{{else}}Request a quote and get response within 24 hours{{end}}
            </p>
        </div>
    </div>
</section>

<section class="py-12 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <div class="bg-white rounded-xl shadow-sm p-8">
                <h2 class="text-2xl font-bold text-gray-900 mb-6">Send Inquiry</h2>
                
                {{if eq 1 .Site.EnableMessage}}
                <form id="inquiry-form" class="space-y-6">
                    <input type="hidden" name="id" id="captchaId">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2"><span class="text-red-500">*</span> Name</label>
                            <input type="text" name="nickname" id="nickname" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Your name">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Company</label>
                            <input type="text" name="company" data-name="Company" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Your company">
                        </div>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2"><span class="text-red-500">*</span> Email</label>
                            <input type="email" name="email" data-name="Email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="your@email.com">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
                            <input type="tel" name="phone" data-name="Phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Phone/WhatsApp">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Country</label>
                        <input type="text" name="country" data-name="Country" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Your country">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Interested Model(s)</label>
                        <input type="text" name="interested_models" data-name="Interested Models" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="e.g., TEC-1200">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2"><span class="text-red-500">*</span> Message / Inquiry</label>
                        <textarea name="message" id="message" rows="4" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Please describe your requirements..."></textarea>
                    </div>
                    
                    {{if eq 1 .Site.EnableCaptcha}}
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2"><span class="text-red-500">*</span> Verification Code</label>
                        <div class="flex gap-4 items-center">
                            <input type="text" name="code" id="code" required class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary" placeholder="Enter code">
                            <img id="refreshCaptcha" src="/api/public/captcha" alt="Captcha" class="h-12 cursor-pointer rounded border" onclick="refreshCaptcha()">
                        </div>
                    </div>
                    {{end}}
                    
                    <button type="button" id="submitBtn" class="w-full bg-accent hover:bg-accent-hover text-white py-3 px-6 rounded-lg font-semibold transition">
                        Send Inquiry
                    </button>
                    <div id="form-message" class="hidden p-3 rounded-md text-sm"></div>
                </form>
                {{else}}
                <div class="text-center py-10">
                    <h2 class="text-xl font-semibold text-gray-800">Inquiry Form Closed</h2>
                    <p class="text-gray-500 mt-2">Please contact us directly via email or phone.</p>
                </div>
                {{end}}
            </div>
            
            <div>
                <div class="bg-white rounded-xl shadow-sm p-8 mb-8">
                    <h3 class="text-xl font-bold text-gray-900 mb-6">Contact Information</h3>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-primary mt-1 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            <div>
                                <span class="text-gray-500 text-sm">Email</span>
                                <p class="font-medium">sales@example.com</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-primary mt-1 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                            </svg>
                            <div>
                                <span class="text-gray-500 text-sm">Phone</span>
                                <p class="font-medium">+86 XXX XXXX XXXX</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <svg class="w-5 h-5 text-primary mt-1 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                            </svg>
                            <div>
                                <span class="text-gray-500 text-sm">Factory Address</span>
                                <p class="font-medium">Industrial Zone, City, Province, China</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-primary rounded-xl shadow-sm p-8 text-white">
                    <h3 class="text-xl font-bold mb-4">Why Choose Us?</h3>
                    <ul class="space-y-3">
                        <li class="flex items-center">
                            <svg class="w-5 h-5 text-accent mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            CE, EEC, COC Certified Products
                        </li>
                        <li class="flex items-center">
                            <svg class="w-5 h-5 text-accent mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            OEM/ODM Customization Available
                        </li>
                        <li class="flex items-center">
                            <svg class="w-5 h-5 text-accent mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            24-Hour Response Guarantee
                        </li>
                        <li class="flex items-center">
                            <svg class="w-5 h-5 text-accent mr-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            Flexible MOQ and Payment Terms
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        {{if .Site.EnableComment}}
        <div class="mt-12 bg-white rounded-xl shadow-sm p-8">
            <h2 class="text-2xl font-bold text-gray-900 mb-6">Recent Inquiries</h2>
            {{$messages := Messages 5}}
            {{if $messages}}
            <div class="space-y-4">
                {{range $messages}}
                <div class="border-b border-gray-100 pb-4 last:border-0">
                    <div class="flex items-center mb-2">
                        <span class="font-semibold text-gray-900">{{.Name}}</span>
                        <span class="text-gray-400 mx-2">·</span>
                        <span class="text-sm text-gray-500">{{date "2006-01-02" .CreatedAt}}</span>
                    </div>
                    <p class="text-gray-600">{{.Content}}</p>
                </div>
                {{end}}
            </div>
            {{else}}
            <p class="text-gray-500 text-center py-8">No inquiries yet. Be the first to contact us!</p>
            {{end}}
        </div>
        {{end}}
    </div>
</section>

{{include "footer.html"}}
{{include "js.html"}}

<script>
    var csrf = '';
    
    function setFormMessage(type, text) {
        var el = $('#form-message');
        if (!el.length) return;
        el.removeClass('hidden bg-red-50 text-red-700 border-red-200 bg-green-50 text-green-700 border-green-200 border');
        if (type === 'success') {
            el.addClass('border bg-green-50 text-green-700 border-green-200');
        } else {
            el.addClass('border bg-red-50 text-red-700 border-red-200');
        }
        el.text(text);
    }

    function setSubmitting(submitting) {
        var btn = $('#submitBtn');
        if (!btn.length) return;
        if (submitting) {
            btn.prop('disabled', true);
            btn.text('Submitting...');
            btn.addClass('opacity-70 cursor-not-allowed');
        } else {
            btn.prop('disabled', false);
            btn.text('Send Inquiry');
            btn.removeClass('opacity-70 cursor-not-allowed');
        }
    }

    function refreshCaptcha() {
        $.ajax({
            url: "/api/public/captcha",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            headers: { "X-CSRF-Token": csrf },
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    $("#captchaId").val(data.data.id);
                    $("#refreshCaptcha").attr("src", data.data.imgbase64);
                } else {
                    setFormMessage('error', data.msg || 'Captcha refresh failed');
                }
            },
            error: function () {
                setFormMessage('error', 'Captcha refresh failed');
            }
        });
    }

    $(function () {
        $('#submitBtn').click(function () {
            var d = {};
            var t = $('#inquiry-form').serializeArray();
            $.each(t, function () {
                d[this.name] = this.value;
            });
            d.article_id = 0;
            
            if (!d.nickname || !d.message) {
                setFormMessage('error', 'Please fill in your name and message');
                return false;
            }

            if ($('#refreshCaptcha').length && (!d.code || !d.id)) {
                setFormMessage('error', 'Please enter verification code');
                return false;
            }
            
            var ex = {};
            $("input[data-name]").each(function () {
                var key = $(this).attr("data-name");
                var value = $(this).val();
                if (value) ex[key] = value;
            });
            d.ext = ex;
            
            setSubmitting(true);
            $.ajax({
                url: "/message/create",
                headers: { "X-CSRF-Token": csrf },
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(d),
                success: function (data) {
                    if (data.code == 200) {
                        setFormMessage('success', 'Inquiry submitted successfully! We will respond within 24 hours.');
                        $('#inquiry-form')[0].reset();
                    } else {
                        setFormMessage('error', data.msg || 'Submission failed, please try again');
                    }
                    setSubmitting(false);
                },
                error: function () {
                    setFormMessage('error', 'Submission failed, please check your network');
                    setSubmitting(false);
                }
            });
            return false;
        });
    });
</script>