@extends('layouts.admin.app')

@section('title', 'Quản lý Footer - Liên hệ')

@section('content')
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-2xl font-bold">Quản lý Footer - Liên hệ</h1>
    </div>

    @if (session('success'))
        <div class="mb-4 rounded-lg bg-green-100 text-green-800 px-4 py-2">{{ session('success') }}</div>
    @endif

    @if (session('error'))
        <div class="mb-4 rounded-lg bg-red-100 text-red-800 px-4 py-2">{{ session('error') }}</div>
    @endif

    @if ($errors->any())
        <div class="mb-4 rounded-lg bg-red-100 text-red-800 px-4 py-2">
            <ul class="list-disc ml-4">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="bg-white rounded-lg p-4 shadow-sm mb-6">
        <form method="GET" class="grid md:grid-cols-5 gap-3">
            <input name="search" value="{{ $filters['search'] ?? '' }}" class="border rounded-lg px-3 py-2"
                placeholder="Tìm tiêu đề, nội dung">
            <select name="section" class="border rounded-lg px-3 py-2">
                <option value="">Tất cả phần</option>
                <option value="contact" @selected(($filters['section'] ?? '') === 'contact')>Liên hệ</option>
            </select>
            <select name="type" class="border rounded-lg px-3 py-2">
                <option value="">Tất cả loại</option>
                <option value="address" @selected(($filters['type'] ?? '') === 'address')>Địa chỉ</option>
                <option value="phone" @selected(($filters['type'] ?? '') === 'phone')>Điện thoại</option>
                <option value="email" @selected(($filters['type'] ?? '') === 'email')>Email</option>
            </select>
            <select name="is_active" class="border rounded-lg px-3 py-2">
                <option value="">Tất cả trạng thái</option>
                <option value="1" @selected(($filters['is_active'] ?? '') === '1')>Hoạt động</option>
                <option value="0" @selected(($filters['is_active'] ?? '') === '0')>Không hoạt động</option>
            </select>
            <button type="submit" class="text-white rounded-lg px-4 py-2" style="background:#117FD4">Lọc</button>
        </form>
    </div>

    {{-- Form Thêm mới --}}
    <div class="bg-white rounded-lg p-4 shadow-sm mb-6">
        <h2 class="font-semibold mb-3">Thêm mới</h2>
        <form method="POST" action="{{ route('admin.footer-links.store') }}" id="footer-link-form"
            class="grid md:grid-cols-4 gap-3">
            @csrf
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Phần hiển thị <span
                        class="text-red-500">*</span></label>
                <select name="section" id="section" class="border rounded-lg px-3 py-2 w-full">
                    <option value="contact">Liên hệ</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Loại <span class="text-red-500">*</span></label>
                <select name="type" id="type" class="border rounded-lg px-3 py-2 w-full">
                    <option value="address">Địa chỉ</option>
                    <option value="phone">Điện thoại</option>
                    <option value="email">Email</option>
                </select>
            </div>
            <div id="parent-wrap" class="hidden">
                <label class="block text-sm font-medium text-gray-700 mb-1">Thuộc địa chỉ</label>
                <select name="parent_id" class="border rounded-lg px-3 py-2 w-full">
                    <option value="">-- Địa chỉ chính --</option>
                    @foreach ($contactParents ?? [] as $p)
                        <option value="{{ $p->id }}">{{ Str::limit($p->title, 40) }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Tiêu đề <span
                        class="text-red-500">*</span></label>
                <input type="text" name="title" class="border rounded-lg px-3 py-2 w-full"
                    placeholder="VD: Nghệ An, SĐT, Email" required>
            </div>
            <div id="url-wrap" class="hidden">
                <label class="block text-sm font-medium text-gray-700 mb-1">URL</label>
                <input type="url" name="url" class="border rounded-lg px-3 py-2 w-full" placeholder="https://...">
            </div>
            <div id="content-wrap">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nội dung</label>
                <textarea name="content" rows="2" class="border rounded-lg px-3 py-2 w-full"
                    placeholder="Địa chỉ chi tiết / SĐT / Email"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Icon (ri-xxx hoặc fas fa-xxx)</label>
                <input type="text" name="icon" class="border rounded-lg px-3 py-2 w-full"
                    placeholder="ri-map-pin-2-fill">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Vị trí</label>
                <input type="number" name="position" class="border rounded-lg px-3 py-2 w-full" value="0"
                    min="0">
            </div>
            <div id="target-wrap" class="hidden">
                <label class="block text-sm font-medium text-gray-700 mb-1">Mở link</label>
                <select name="target" class="border rounded-lg px-3 py-2 w-full">
                    <option value="0">Cùng tab</option>
                    <option value="1">Tab mới</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Trạng thái</label>
                <select name="is_active" class="border rounded-lg px-3 py-2 w-full">
                    <option value="1">Hoạt động</option>
                    <option value="0">Không hoạt động</option>
                </select>
            </div>
            <div class="md:col-span-4">
                <button type="submit" class="text-white rounded-lg px-4 py-2 font-semibold"
                    style="background:#117FD4">Thêm</button>
            </div>
        </form>
    </div>

    {{-- Bảng danh sách --}}
    <div class="bg-white rounded-lg p-4 shadow-sm">
        <table class="w-full text-sm">
            <thead>
                <tr class="border-b">
                    <th class="text-left py-2">ID</th>
                    <th class="text-left py-2">Phần</th>
                    <th class="text-left py-2">Loại</th>
                    <th class="text-left py-2">Tiêu đề</th>
                    <th class="text-left py-2">URL/Nội dung</th>
                    <th class="text-left py-2">Vị trí</th>
                    <th class="text-left py-2">Trạng thái</th>
                    <th class="text-left py-2">Tác vụ</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($items as $item)
                    <tr class="border-b align-top">
                        <td class="py-2">{{ $item->id }}</td>
                        <td class="py-2">Liên hệ</td>
                        <td class="py-2">
                            @switch($item->type)
                                @case('address')
                                    Địa chỉ
                                @break

                                @case('phone')
                                    SĐT
                                @break

                                @case('email')
                                    Email
                                @break

                                @default
                                    {{ $item->type }}
                            @endswitch
                        </td>
                        <td class="py-2">{{ $item->title }}</td>
                        <td class="py-2 max-w-xs truncate" title="{{ $item->content }}">
                            {{ Str::limit($item->content, 50) ?? '-' }}
                        </td>
                        <td class="py-2">{{ $item->position }}</td>
                        <td class="py-2">
                            @if ($item->is_active)
                                <span
                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Hoạt
                                    động</span>
                            @else
                                <span
                                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Tắt</span>
                            @endif
                        </td>
                        <td class="py-2 space-y-2">
                            <details>
                                <summary class="cursor-pointer text-blue-600">Sửa</summary>
                                <form method="POST" action="{{ route('admin.footer-links.update', $item->id) }}"
                                    class="mt-2 grid md:grid-cols-2 gap-2">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="section" value="{{ $item->section }}">
                                    <input type="hidden" name="type" value="{{ $item->type }}">
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Tiêu đề <span
                                                class="text-red-500">*</span></label>
                                        <input type="text" name="title" value="{{ $item->title }}"
                                            class="border rounded px-2 py-1 w-full" required>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Nội dung</label>
                                        <textarea name="content" rows="2" class="border rounded px-2 py-1 w-full">{{ $item->content }}</textarea>
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Icon</label>
                                        <input type="text" name="icon" value="{{ $item->icon }}"
                                            class="border rounded px-2 py-1 w-full">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Vị trí</label>
                                        <input type="number" name="position" value="{{ $item->position }}"
                                            class="border rounded px-2 py-1 w-full" min="0">
                                    </div>
                                    <div>
                                        <label class="block text-xs font-medium text-gray-600 mb-1">Trạng thái</label>
                                        <select name="is_active" class="border rounded px-2 py-1 w-full">
                                            <option value="1" @selected($item->is_active)>Hoạt động</option>
                                            <option value="0" @selected(!$item->is_active)>Tắt</option>
                                        </select>
                                    </div>
                                    <div class="md:col-span-2">
                                        <button class=" text-white rounded px-3 py-1" style="background:#117FD4">Cập
                                            nhật</button>
                                    </div>
                                </form>
                            </details>
                            <form method="POST" action="{{ route('admin.footer-links.destroy', $item->id) }}"
                                onsubmit="return confirm('Xóa mục này?')">
                                @csrf
                                @method('DELETE')
                                <button class="text-red-600">Xóa</button>
                            </form>
                        </td>
                    </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-4 text-center text-gray-500">Chưa có dữ liệu. Thêm Liên kết hoặc Liên
                                hệ ở form trên.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
            <div class="mt-4">{{ $items->withQueryString()->links() }}</div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const section = document.getElementById('section');
                const type = document.getElementById('type');
                const urlWrap = document.getElementById('url-wrap');
                const contentWrap = document.getElementById('content-wrap');
                const parentWrap = document.getElementById('parent-wrap');
                const targetWrap = document.getElementById('target-wrap');

                function toggleFields() {
                    const sec = section.value;
                    const typ = type.value;
                    const isContact = sec === 'contact';
                    const isAddress = typ === 'address';

                    // Always show content, hide url
                    urlWrap.classList.add('hidden');
                    contentWrap.classList.remove('hidden');
                    parentWrap.classList.toggle('hidden', !(isContact && isAddress));
                    targetWrap.classList.add('hidden');

                    const urlInput = urlWrap.querySelector('input');
                    const contentInput = contentWrap.querySelector('textarea');
                    urlInput?.removeAttribute('required');
                    contentInput?.setAttribute('required', 'required');
                }

                section.addEventListener('change', function() {
                    // Only contact section now, no need to change type options
                    toggleFields();
                });
                type.addEventListener('change', toggleFields);
                toggleFields();
            });
        </script>
    @endsection