@extends('layouts.admin.app')

@section('title', 'Liên hệ & địa chỉ công ty')
@section('content')
    <div class="bg-white rounded-lg p-4 mb-6 shadow-sm">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">
            <h1 class="text-lg font-semibold text-gray-800">
                Quản lý Liên hệ & địa chỉ công ty
            </h1>

            <button id="openAddModal"
                class="shrink-0 bg-blue-500 text-white px-4 py-2 rounded-lg flex items-center space-x-2 shadow transition duration-200">
                <i class="fas fa-plus"></i>
                <span>Thêm mới</span>
            </button>
        </div>

    </div>
    <div class="bg-white rounded-lg overflow-hidden table-container">

        <div class="overflow-x-auto">
            <div id="tableContainer"></div>
            <div id="paginationContainer" class="flex justify-end p-4 space-x-2"></div>
        </div>
    </div>

    @include('admin.contact-info.create')
    @include('admin.contact-info.edit')

    <script>
        const ROUTES = {
            list: "{{ route('admin.contact-info.list') }}"
        };
    </script>
    <script>
        $(document).ready(function() {
            loadPaginatedData(ROUTES.list, 1, renderContactInfo);
            $('#openAddModal').click(function() {
                $('#addModal').removeClass('hidden');
            });

            $('.closeAddModal').click(function() {
                $('#addModal').addClass('hidden');
                $('#addModal form')[0].reset();
            });

            $('#addModal').click(function(e) {
                if (e.target.id === 'addModal') {
                    $(this).addClass('hidden');
                    $(this).find('form')[0].reset();
                }
            });

            $('#addContactInfo').submit(function(e) {
                e.preventDefault();

                var form = $(this);
                var url = form.attr('action');
                var $btn = form.find("button[type='submit']");
                var originalText = $btn.text().trim();
                var formData = new FormData(form[0]);

                $.ajax({
                    type: 'POST',
                    url: url,
                    data: formData,
                    processData: false,
                    contentType: false,
                    enctype: 'multipart/form-data',
                    beforeSend: function () {
                        setBtnLoading($btn, originalText);
                    },
                    success: function(response) {
                        showAlert('Thêm thông tin liên hệ thành công !', 'success');
                        $('#addModal').addClass('hidden');
                        form[0].reset();

                        loadPaginatedData(
                            ROUTES.list,
                            1,
                            renderContactInfo
                        );
                    },
                    error: function(xhr) {
                        handleAjaxError(xhr);
                    },
                    complete: function () {
                        clearBtnLoading($btn, originalText);
                    }
                });
            });


            let searchTimeout;
            $('#searchInput').on('input', function() {
                const keyword = $(this).val().trim();

                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    loadPaginatedData(ROUTES.list, 1, renderContactInfo, {
                        search: keyword
                    });
                }, 500);
            });
        });

        function renderContactInfo(data, page = 1, perPage = 10) {
            const escapeHtml = (str) => {
                if (str === null || str === undefined) return '';
                return String(str)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#39;');
            };

            let html = `
                                                                <table class="min-w-full divide-y divide-gray-200">
                                                                    <thead class="bg-gray-50">
                                                                        <tr>
                                                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider sortable">#</th>
                                                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider sortable">Địa chỉ</th>
                                                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider sortable">Liên hệ</th>
                                                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider sortable">Mạng xã hội</th>
                                                                            <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider sortable">Ngày tạo</th>
                                                                            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider sortable">Thao tác</th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody class="bg-white divide-y divide-gray-200">
                                                                                                                    `;

            if (!Array.isArray(data) || data.length === 0) {
                html += `<tr><td colspan="6" class="p-3 text-center text-gray-500">Không có dữ liệu</td></tr>`;
            } else {
                data.forEach((item, index) => {
                    const displayIndex = (page - 1) * perPage + index + 1;
                    const address = escapeHtml(item.address);
                    const phone = escapeHtml(item.phone ?? '');
                    const hotline = escapeHtml(item.hotline ?? '');
                    const email = escapeHtml(item.email ?? '');
                    const zalo = escapeHtml(item.zalo ?? '');
                    const facebook = escapeHtml(item.facebook ?? '');
                    const createdAt = escapeHtml(item.createdAt ?? item.created_at ?? '');

                    html += `
                                                                    <tr class="table-row">
                                                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 text-center">${displayIndex}</td>
                                                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">${address}</td>
                                                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-left">
                                                                            <div>Điện thoại: <span class="font-medium">${phone || '-'}</span></div>
                                                                            <div>Hotline: <span class="font-medium">${hotline || '-'}</span></div>
                                                                            <div>Email: <span class="font-medium">${email || '-'}</span></div>
                                                                        </td>
                                                                         <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-left">
                                                                            <div>Zalo: <span class="font-medium">${zalo || '-'}</span></div>
                                                                            <div>Facebook: <span class="font-medium">${facebook || '-'}</span></div>
                                                                        </td>
                                                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">${createdAt}</td>
                                                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium text-center">
                                                                            <button class="edit-btn text-blue-600 hover:text-blue-900 mr-3" data-id="${escapeHtml(item.id)}" aria-label="edit-${escapeHtml(item.id)}">
                                                                                <i class="fas fa-edit"></i>
                                                                            </button>
                                                                            <button class="delete-btn text-red-600 hover:text-red-900" data-id="${escapeHtml(item.id)}" aria-label="delete-${escapeHtml(item.id)}">
                                                                                <i class="fas fa-trash"></i>
                                                                            </button>
                                                                        </td>
                                                                    </tr>
                                                                `;
                });
            }

            html += `</tbody></table>`;
            $("#tableContainer").html(html);
        }

        $(document).on('click', '.edit-btn', function() {
            const id = $(this).data('id');
            $.ajax({
                url: `/admin/contact-info/${id}/edit`,
                type: "GET",
                success: function(response) {
                    $("#editAddress").val(response.data.address);
                    $("#editPhone").val(response.data.phone);
                    $("#editEmail").val(response.data.email);
                    $("#editZalo").val(response.data.zalo);
                    $('#editFacebook').val(response.data.facebook);
                    $('#editInstagram').val(response.data.instagram);
                    $('#editTwitter').val(response.data.twitter);
                    $('#editYoutube').val(response.data.youtube);
                    $('#editTikTok').val(response.data.tikTok);
                    $('#editHotline').val(response.data.hotline);
                    $('#editGoogleMaps').val(response.data.google_maps);
                    $('#editMonSatOpen').val(response.data.mon_sat_open);
                    $('#editMonSatClose').val(response.data.mon_sat_close);
                    $('#editSunOpen').val(response.data.sun_open);
                    $('#editSunClose').val(response.data.sun_close);
                    $("#editForm").attr("action", `/admin/contact-info/update/${id}`);

                    $("#editModal")
                        .removeClass("hidden")
                        .addClass("flex")
                        .css({
                            opacity: 1,
                            transform: "scale(1)"
                        });
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    alert("Không thể tải dữ liệu danh mục!");
                }
            });
        });

        $(document).on("click", ".closeEditModal", function() {
            $("#editModal")
                .addClass("hidden")
                .removeClass("flex")
                .css({
                    opacity: 0,
                    transform: "scale(0.95)"
                });
        });

        $(document).on('submit', '#editForm', function(e) {
            e.preventDefault();
            var form = $(this);
            var url = form.attr('action');
            var $btn = form.find("button[type='submit']");
            var originalText = $btn.text().trim();
            var formData = new FormData(form[0]);
            $.ajax({
                type: 'POST',
                url: url,
                data: formData,
                processData: false,
                contentType: false,
                enctype: 'multipart/form-data',
                headers: {
                    'X-HTTP-Method-Override': 'PUT'
                },
                beforeSend: function () {
                    setBtnLoading($btn, originalText);
                },
                success: function(response) {
                    showAlert('Cập nhật danh mục thành công!', 'success');
                    $('#editModal').addClass('hidden');
                    loadPaginatedData(ROUTES.list, 1, renderContactInfo);
                },
                error: function(xhr) {
                    handleAjaxError(xhr);
                },
                complete: function () {
                    clearBtnLoading($btn, originalText);
                }
            });
        });

        $(document).on('click', '.delete-btn', function() {
            const id = $(this).data('id');
            if (!confirm('Bạn có chắc chắn muốn xóa thông tin này không?')) return;

            $.ajax({
                url: `/admin/contact-info/${id}`,
                type: 'DELETE',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    showAlert('Xóa thành công', 'success');
                    loadPaginatedData(ROUTES.list, 1, renderContactInfo);
                },
                error: function(xhr) {
                    showAlert('Có lỗi xảy ra: ' + xhr.statusText, 'error');
                }
            });
        });
    </script>
@endsection