@extends('layouts.admin.app')

@section('title', 'Banner Hero')

@section('content')
    <div class="space-y-6">
        <div
            class="bg-white rounded-lg p-4 shadow-sm flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div class="flex-1 w-full md:pr-4">
                <h1 class="text-lg font-semibold text-gray-800">
                    Quản lý Banner
                </h1>
            </div>

            <div class="flex items-center gap-2 w-full md:w-auto">
                <select id="pageFilter"
                    class="w-full md:w-auto border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="all">Tất cả các trang</option>
                    @foreach ($pageOptions as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
                <button id="openAddModal"
                    class="shrink-0  text-white px-4 py-2 rounded-xl flex items-center gap-2 shadow"style="background:#117FD4">
                    <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>
    </div>

    @include('admin.hero-banner.create')
    @include('admin.hero-banner.edit')

    <div id="deleteConfirmModal" class="hidden fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 p-4">
        <div class="bg-white w-full max-w-md rounded-2xl shadow-lg">
            <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
                <h3 class="text-base font-semibold text-gray-800">Xác nhận xóa banner</h3>
                <button type="button" id="closeDeleteConfirmModal"
                    class="text-gray-400 hover:text-gray-700 text-xl leading-none">&times;</button>
            </div>
            <div class="px-6 py-5">
                <p class="text-sm text-gray-600">Bạn có chắc chắn muốn xóa banner này không?</p>
            </div>
            <div class="px-6 py-4 border-t border-gray-100 flex justify-end gap-3">
                <button type="button" class="cancelDeleteBtn px-4 py-2 border rounded-lg hover:bg-gray-100">Hủy</button>
                <button type="button" id="confirmDeleteBtn" class="px-4 py-2 rounded-lg text-white"
                    style="background:#117FD4">Xác nhận xóa</button>
            </div>
        </div>
    </div>

    <script>
        const ROUTES = {
            list: "{{ route('admin.hero-banner.list') }}",
            store: "{{ route('admin.hero-banner.store') }}"
        };

        const PAGE_OPTIONS = @json($pageOptions);

        function previewAddImage(event) {
            const output = document.getElementById('addPreviewImage');
            if (event.target.files && event.target.files[0]) {
                output.src = URL.createObjectURL(event.target.files[0]);
                output.onload = function() {
                    URL.revokeObjectURL(output.src)
                };
                output.classList.remove('hidden');
                document.getElementById('addUploadIcon').classList.add('hidden');
            }
        }

        function previewEditImage(event) {
            const output = document.getElementById('editPreviewImage');
            if (event.target.files && event.target.files[0]) {
                output.src = URL.createObjectURL(event.target.files[0]);
                output.onload = function() {
                    URL.revokeObjectURL(output.src)
                };
                output.classList.remove('hidden');
                document.getElementById('editUploadIcon').classList.add('hidden');
            }
        }

        function renderStatus(status) {
            if (parseInt(status) === 1) {
                return '<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">Hiển thị</span>';
            }

            return '<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">Ẩn</span>';
        }

        function renderData(data) {
            let html = `
                <table class="w-full text-left border-collapse" style="width:100%">
                    <thead>
                        <tr class="bg-gray-50 border-b border-gray-200 text-xs uppercase text-gray-600 font-semibold tracking-wider">
                            <th class="p-3">ID</th>
                            <th class="p-3">Hình ảnh</th>
                            <th class="p-3">Tiêu đề</th>
                            <th class="p-3">Trang hien thi</th>
                            <th class="p-3 text-center">Thứ tự</th>
                            <th class="p-3 text-center">Trạng thái</th>
                            <th class="p-3 text-center">Hành động</th>
                        </tr>
                    </thead>
                    <tbody class="text-sm text-gray-700">
            `;

            if (!Array.isArray(data) || data.length === 0) {
                html += '<tr><td colspan="7" class="px-6 py-6 text-center text-gray-400">Không có dữ liệu</td></tr>';
            } else {
                data.forEach((item) => {
                    const imageHtml = item.image ?
                        `<img src="${item.image}" class="w-28 h-16 object-cover rounded-xl border shadow-sm">` :
                        `<div class="w-28 h-16 bg-gray-100 border rounded-xl flex items-center justify-center text-gray-400 text-xs">No image</div>`;

                    html += `
                        <tr class="border-b border-gray-100 hover:bg-gray-50 transition">
                            <td class="p-3">#${item.id}</td>
                            <td class="p-3">${imageHtml}</td>
                            <td class="p-3">
                                <p class="font-semibold text-gray-900">${item.title ?? ''}</p>
                            </td>
                            <td class="p-3">
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 text-xs font-semibold">${item.page_label ?? ''}</span>
                            </td>
                            <td class="p-3 text-center">${item.order_index}</td>
                            <td class="p-3 text-center">${renderStatus(item.status)}</td>
                            <td class="p-3 text-center">
                                <div class="flex justify-center gap-2">
                                    <button class="edit-btn text-blue-500 hover:text-blue-700 bg-blue-50 hover:bg-blue-100 w-8 h-8 rounded-lg flex items-center justify-center transition" data-id="${item.id}"><i class="fas fa-pen"></i></button>
                                    <button class="delete-btn text-red-500 hover:text-red-700 bg-red-50 hover:bg-red-100 w-8 h-8 rounded-lg flex items-center justify-center transition" data-id="${item.id}"><i class="fas fa-trash"></i></button>
                                </div>
                            </td>
                        </tr>
                    `;
                });
            }

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

        function getFilters() {
            return {
                page_key: $('#pageFilter').val()
            };
        }

        function openDeleteConfirmModal() {
            $('#deleteConfirmModal').removeClass('hidden').addClass('flex');
        }

        function closeDeleteConfirmModal() {
            $('#deleteConfirmModal').addClass('hidden').removeClass('flex');
        }

        $(document).ready(function() {
            let pendingDeleteId = null;

            loadPaginatedData(ROUTES.list, 1, renderData);

            $('#openAddModal').click(() => $('#addModal').removeClass('hidden').addClass('flex'));

            $('.closeAddModal').click(function() {
                $('#addModal').addClass('hidden').removeClass('flex');
                $('#addForm')[0].reset();
                $('#addPreviewImage').attr('src', '').addClass('hidden');
                $('#addUploadIcon').removeClass('hidden');
            });

            $('.closeEditModal').click(function() {
                $('#editModal').addClass('hidden').removeClass('flex');
                $('#editForm')[0].reset();
            });

            $('#addForm').submit(function(e) {
                e.preventDefault();
                const form = $(this);
                const $btn = form.find("button[type='submit']");
                const originalText = $btn.text().trim();
                const formData = new FormData(this);

                $.ajax({
                    type: 'POST',
                    url: form.attr('action'),
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        setBtnLoading($btn, originalText);
                    },
                    success: function() {
                        showAlert('Thêm banner hero thành công!', 'success');
                        $('.closeAddModal').click();
                        loadPaginatedData(ROUTES.list, 1, renderData, getFilters());
                    },
                    error: function(xhr) {
                        handleAjaxError(xhr);
                    },
                    complete: function() {
                        clearBtnLoading($btn, originalText);
                    }
                });
            });

            $(document).on('click', '.edit-btn', function() {
                const id = $(this).data('id');
                $.get(`/admin/hero-banners/${id}/edit`, function(res) {
                    const item = res.data;
                    $('#editTitle').val(item.title);
                    $('#editPageKey').val(item.page_key || 'global');
                    $('#editOrderIndex').val(item.order_index);
                    $('#editStatus').prop('checked', item.status == 1);
                    $('#editForm').attr('action', `/admin/hero-banners/${id}`);

                    if (item.image) {
                        $('#editPreviewImage').attr('src', item.image).removeClass('hidden');
                        $('#editUploadIcon').addClass('hidden');
                    } else {
                        $('#editPreviewImage').attr('src', '').addClass('hidden');
                        $('#editUploadIcon').removeClass('hidden');
                    }

                    $('#editModal').removeClass('hidden').addClass('flex');
                });
            });

            $('#editForm').submit(function(e) {
                e.preventDefault();
                const form = $(this);
                const $btn = form.find("button[type='submit']");
                const originalText = $btn.text().trim();
                const formData = new FormData(this);
                $.ajax({
                    type: 'POST',
                    url: form.attr('action'),
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-HTTP-Method-Override': 'PUT'
                    },
                    beforeSend: function() {
                        setBtnLoading($btn, originalText);
                    },
                    success: function() {
                        showAlert('Cập nhật banner hero thành công!', 'success');
                        $('.closeEditModal').click();
                        loadPaginatedData(ROUTES.list, 1, renderData, getFilters());
                    },
                    error: function(xhr) {
                        handleAjaxError(xhr);
                    },
                    complete: function() {
                        clearBtnLoading($btn, originalText);
                    }
                });
            });

            $(document).on('click', '.delete-btn', function() {
                pendingDeleteId = $(this).data('id');
                openDeleteConfirmModal();
            });

            $('#closeDeleteConfirmModal, .cancelDeleteBtn').on('click', function() {
                pendingDeleteId = null;
                closeDeleteConfirmModal();
            });

            $('#deleteConfirmModal').on('click', function(e) {
                if (e.target.id === 'deleteConfirmModal') {
                    pendingDeleteId = null;
                    closeDeleteConfirmModal();
                }
            });

            $('#confirmDeleteBtn').on('click', function() {
                if (!pendingDeleteId) return;

                const id = pendingDeleteId;
                pendingDeleteId = null;
                closeDeleteConfirmModal();

                $.ajax({
                    url: `/admin/hero-banners/${id}`,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function() {
                        showAlert('Đã xóa thành công!', 'success');
                        loadPaginatedData(ROUTES.list, 1, renderData, getFilters());
                    },
                    error: function(xhr) {
                        handleAjaxError(xhr);
                    }
                });
            });

            $('#pageFilter').on('change', function() {
                loadPaginatedData(ROUTES.list, 1, renderData, getFilters());
            });
        });
    </script>
@endsection