@extends('layouts.app')

@section('title', 'Liên hệ - XING NEW')

@php
    $settings = \App\Models\Setting::first();
@endphp

@section('content')
<!-- Header Banner -->
<div class="bg-slate-900 py-16 text-center relative overflow-hidden">
     <div class="absolute inset-0 opacity-10">
        <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="smallGrid" width="20" height="20" patternUnits="userSpaceOnUse">
                    <circle cx="2" cy="2" r="1" fill="currentColor"/>
                </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#smallGrid)" />
        </svg>
    </div>
    <div class="container mx-auto px-4 relative z-10" data-aos="fade-up">
        <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">Liên Hệ Với Chúng Tôi</h1>
        <p class="text-slate-400 max-w-xl mx-auto">Chúng tôi luôn sẵn sàng lắng nghe và hỗ trợ bạn. Hãy để lại thông tin, chúng tôi sẽ phản hồi trong thời gian sớm nhất.</p>
    </div>
</div>

<div class="py-16 bg-slate-50">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- Contact Info -->
            <div data-aos="fade-right">
                <div class="bg-white rounded-2xl shadow-sm p-8 h-full">
                    <h2 class="text-2xl font-bold text-slate-900 mb-6">Thông tin liên hệ</h2>
                    
                    <div class="space-y-6">
                        <!-- Address -->
                        <div class="flex items-start gap-4">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 flex-shrink-0">
                                <svg class="w-5 h-5" 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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">Địa chỉ</h3>
                                <p class="text-slate-600">{{ $settings->address ?? 'Đang cập nhật...' }}</p>
                            </div>
                        </div>

                        <!-- Phone -->
                        <div class="flex items-start gap-4">
                            <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 flex-shrink-0">
                                <svg class="w-5 h-5" 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"></path></svg>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">Điện thoại</h3>
                                <p class="text-slate-600">
                                    <a href="tel:{{ $settings->phone }}" class="hover:text-blue-600">{{ $settings->phone ?? 'Đang cập nhật...' }}</a>
                                </p>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="flex items-start gap-4">
                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 flex-shrink-0">
                                <svg class="w-5 h-5" 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"></path></svg>
                            </div>
                            <div>
                                <h3 class="font-bold text-slate-900">Email</h3>
                                <p class="text-slate-600">
                                    <a href="mailto:{{ $settings->email }}" class="hover:text-blue-600">{{ $settings->email ?? 'Đang cập nhật...' }}</a>
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Social Media -->
                    <div class="mt-8 pt-8 border-t border-slate-100">
                        <h3 class="font-bold text-slate-900 mb-4">Kết nối với chúng tôi</h3>
                        <div class="flex gap-4">
                            @if($settings?->facebook)
                                <a href="{{ $settings->facebook }}" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-blue-600 hover:text-white transition-colors" target="_blank">
                                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.046V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                                </a>
                            @endif
                            @if($settings?->zalo)
                                <a href="{{ $settings->zalo }}" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600 hover:bg-blue-500 hover:text-white transition-colors" target="_blank">
                                    <span class="font-bold text-xs">Zalo</span>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div data-aos="fade-left">
                <div class="bg-white rounded-2xl shadow-sm p-8 h-full">
                    <h2 class="text-2xl font-bold text-slate-900 mb-6">Gửi tin nhắn</h2>

                    @if(session('success'))
                        <div class="mb-6 p-4 bg-green-100 text-green-700 rounded-lg border border-green-200" data-aos="fade-in">
                            {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('contact.store') }}" method="POST" class="space-y-4">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1">Họ tên *</label>
                                <input type="text" name="name" required class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" placeholder="Nhập họ tên của bạn">
                                @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-1">Số điện thoại *</label>
                                <input type="tel" name="phone" required class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" placeholder="Nhập số điện thoại">
                                @error('phone') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Email</label>
                            <input type="email" name="email" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" placeholder="Nhập email của bạn">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Tiêu đề</label>
                            <input type="text" name="subject" class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all" placeholder="Bạn cần hỗ trợ gì?">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1">Nội dung *</label>
                            <textarea name="message" rows="4" required class="w-full px-4 py-2 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all resize-none" placeholder="Nhập nội dung tin nhắn..."></textarea>
                            @error('message') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg shadow-lg hover:shadow-blue-500/30 transition-all transform hover:-translate-y-1">
                            Gửi tin nhắn
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Google Map (Within Container) -->
        @if($settings?->map_iframe)
            <div class="mt-12 rounded-2xl overflow-hidden shadow-sm h-96 md:h-[500px] bg-slate-200 relative z-10" data-aos="fade-up">
                <div class="w-full h-full [&_iframe]:w-full [&_iframe]:h-full [&_iframe]:border-0">
                    {!! $settings->map_iframe !!}
                </div>
            </div>
        @endif
    </div>
</div>
@endsection