@extends('layouts-v2.app')

@section('title', 'Allowed Domains')

@section('content')
<div class="font-sans text-slate-800">
    <div class="flex flex-col md:flex-row justify-between items-center mb-6">
        <div class="flex items-center gap-3 mb-6">
        <div class="p-2.5 bg-blue-100 text-blue-600 rounded-lg shadow-sm border border-blue-200">
            <i data-lucide="calendar-days" class="w-6 h-6"></i>
        </div>
        <h1 class="text-2xl md:text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-indigo-600">
            Quản lý Domain
        </h1>
    </div>
        <button class="mt-4 md:mt-0 bg-gray-900 hover:bg-gray-800 text-white px-5 py-2.5 rounded-lg font-medium transition-all shadow-md hover:shadow-lg flex items-center gap-2 btn-add">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" /></svg>
            Thêm Domain
        </button>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Domain</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Trạng thái</th>
                        <th class="px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Mô tả</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Người tạo / Sửa</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Thời gian</th>
                        <th class="px-6 py-4 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Hành động</th>
                    </tr>
                </thead>
                <tbody id="tableBody" class="bg-white divide-y divide-gray-200">
                    </tbody>
            </table>
        </div>
        
        <div class="bg-gray-50 px-6 py-4 border-t border-gray-200 flex items-center justify-between">
            <div class="text-sm text-gray-500" id="paginationInfo">
                Đang tải dữ liệu...
            </div>
            <div class="flex items-center space-x-1" id="paginationLinks">
                </div>
        </div>
    </div>

    <div id="modalAdd" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center z-50 backdrop-blur-sm transition-opacity">
        <div class="bg-white p-8 rounded-2xl shadow-2xl w-full max-w-lg transform scale-95 transition-transform duration-300">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-800">🗂️ Thêm Domain Mới</h2>
                <button class="text-gray-400 hover:text-gray-600 btn-close-add">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>

            <form id="formAdd">
                @csrf
                <div class="mb-5">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Domain <span class="text-red-500">*</span></label>
                    <input type="text" name="domain" placeholder="VD: https://youtube.com" class="w-full border border-gray-300 px-4 py-2 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition" required>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Mô tả</label>
                    <textarea name="description" rows="3" class="w-full border border-gray-300 px-4 py-2 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition"></textarea>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Trạng thái</label>
                    <select name="is_active" class="w-full border border-gray-300 px-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-gray-900 bg-white">
                        <option value="1">🟢 Đang hoạt động</option>
                        <option value="0">🔴 Ngừng hoạt động</option>
                    </select>
                </div>

                <div class="flex justify-end gap-3 mt-4">
                    <button type="button" class="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition btn-close-add">Hủy</button>
                    <button type="submit" class="px-5 py-2.5 bg-gray-900 hover:bg-gray-800 text-white font-medium rounded-lg transition shadow-md">Thêm mới</button>
                </div>
            </form>
        </div>
    </div>

    <div id="modalEdit" class="fixed inset-0 bg-gray-900 bg-opacity-50 hidden items-center justify-center z-50 backdrop-blur-sm transition-opacity">
        <div class="bg-white p-8 rounded-2xl shadow-2xl w-full max-w-lg transform scale-95 transition-transform duration-300">
             <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold text-gray-800">✏️ Cập nhật Domain</h2>
                <button class="text-gray-400 hover:text-gray-600 btn-close-edit">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>

            <form id="formEdit">
                @csrf
                <input type="hidden" name="id" id="edit_id">

                <div class="mb-5">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Domain <span class="text-red-500">*</span></label>
                    <input type="text" name="domain" id="edit_domain" class="w-full border border-gray-300 px-4 py-2 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition" required>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Mô tả</label>
                    <textarea name="description" id="edit_description" rows="3" class="w-full border border-gray-300 px-4 py-2 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent outline-none transition"></textarea>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Trạng thái</label>
                    <select name="is_active" id="edit_is_active" class="w-full border border-gray-300 px-4 py-2 rounded-lg outline-none focus:ring-2 focus:ring-gray-900 bg-white">
                        <option value="1">🟢 Đang hoạt động</option>
                        <option value="0">🔴 Ngừng hoạt động</option>
                    </select>
                </div>

                <div class="flex justify-end gap-3 mt-4">
                    <button type="button" class="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium rounded-lg transition btn-close-edit">Hủy</button>
                    <button type="submit" class="px-5 py-2.5 bg-gray-900 hover:bg-gray-800 text-white font-medium rounded-lg transition shadow-md">Lưu thay đổi</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    let currentPage = 1;

    // --- 1. CORE FUNCTIONS: Fetch & Render Data ---
    function fetchDomains(page = 1) {
        currentPage = page;
        
        // Hiển thị skeleton loading
        $('#tableBody').html(`
            <tr>
                <td colspan="7" class="px-6 py-10 text-center">
                    <div class="flex justify-center items-center">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
                        <span class="ml-2 text-gray-500 font-medium">Đang tải dữ liệu...</span>
                    </div>
                </td>
            </tr>
        `);

        $.ajax({
            url: "{{ route('allowed-domain.index') }}",
            type: 'GET',
            data: { page: page },
            success: function(response) {
                renderTable(response.data);
                renderPagination(response);
            },
            error: function() {
                $('#tableBody').html('<tr><td colspan="7" class="px-6 py-4 text-center text-red-500">Lỗi không thể tải dữ liệu!</td></tr>');
            }
        });
    }

    function renderTable(data) {
        let html = '';
        if (data.length === 0) {
            html = '<tr><td colspan="7" class="px-6 py-8 text-center text-gray-500 font-medium">Không có bản ghi nào</td></tr>';
        } else {
            data.forEach(item => {
                // Format Status Label
                let statusBadge = item.is_active 
                    ? '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Hoạt động</span>' 
                    : '<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Đã tắt</span>';

                // Format Date string
                let dateObj = new Date(item.created_at);
                let formattedDate = dateObj.toLocaleTimeString('vi-VN', {hour: '2-digit', minute:'2-digit'}) + ' ' + dateObj.toLocaleDateString('vi-VN');

                html += `
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.id}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.domain}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-center">${statusBadge}</td>
                        <td class="px-6 py-4 text-sm text-gray-500 max-w-xs truncate" title="${item.description || ''}">${item.description || '-'}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-center text-gray-500">
                            <div class="font-medium text-gray-900">${item.created_by_name}</div>
                            <div class="text-xs text-gray-400">Sửa: ${item.updated_by_name}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-center text-sm text-gray-500">${formattedDate}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium space-x-2">
                            <button class="text-blue-600 hover:text-blue-900 bg-blue-50 hover:bg-blue-100 px-3 py-1.5 rounded transition btn-edit" data-id="${item.id}">Sửa</button>
                            <button class="text-red-600 hover:text-red-900 bg-red-50 hover:bg-red-100 px-3 py-1.5 rounded transition btn-delete" data-id="${item.id}">Xóa</button>
                        </td>
                    </tr>
                `;
            });
        }
        $('#tableBody').html(html);
    }

    function renderPagination(response) {
        let currentPage = response.current_page;
        let lastPage = response.last_page;

        // 1. Render Info Text (Dòng text hiển thị "Hiển thị x đến y...")
        let from = response.from || 0;
        let to = response.to || 0;
        $('#paginationInfo').html(`Hiển thị <span class="font-medium text-gray-900">${from}</span> đến <span class="font-medium text-gray-900">${to}</span> trong tổng số <span class="font-medium text-gray-900">${response.total}</span> bản ghi`);

        // 2. Render Page Buttons
        let linksHtml = '';

        // Nếu không có data thì không hiển thị phân trang
        if (lastPage <= 1) {
            $('#paginationLinks').html('');
            return;
        }

        // --- NÚT PREVIOUS (TRƯỚC) ---
        if (currentPage > 1) {
            linksHtml += `<button class="page-link px-3 py-1 rounded border text-sm transition-all bg-white text-gray-700 hover:bg-gray-50 border-gray-300" data-page="${currentPage - 1}">«</button>`;
        } else {
            linksHtml += `<button disabled class="px-3 py-1 rounded border border-gray-100 text-gray-300 bg-gray-50 cursor-not-allowed text-sm">«</button>`;
        }

        // --- LOGIC TÍNH TOÁN DẤU 3 CHẤM ---
        let delta = 2; // Số nút muốn hiển thị ở hai bên trang hiện tại (VD: delta=2 -> [5] 6 (7) 8 [9])
        let range = [];
        let rangeWithDots = [];
        let l;

        // Lọc ra những trang cần hiển thị
        for (let i = 1; i <= lastPage; i++) {
            if (i === 1 || i === lastPage || (i >= currentPage - delta && i <= currentPage + delta)) {
                range.push(i);
            }
        }

        // Chèn dấu 3 chấm vào những đoạn bị đứt quãng
        for (let i of range) {
            if (l) {
                if (i - l === 2) {
                    // Nếu khoảng cách chỉ là 1 trang, in luôn số đó ra thay vì dấu ...
                    rangeWithDots.push(l + 1);
                } else if (i - l !== 1) {
                    // Nếu khoảng cách > 1 trang, chèn dấu ...
                    rangeWithDots.push('...');
                }
            }
            rangeWithDots.push(i);
            l = i;
        }

        // --- RENDER HTML CHO CÁC NÚT SỐ & DẤU 3 CHẤM ---
        rangeWithDots.forEach(i => {
            if (i === '...') {
                linksHtml += `<span class="px-3 py-1 text-gray-400 font-medium text-sm tracking-widest">...</span>`;
            } else {
                let activeClass = (i === currentPage) 
                    ? 'bg-gray-900 text-white border-gray-900 shadow-sm pointer-events-none' 
                    : 'bg-white text-gray-700 hover:bg-gray-50 border-gray-300';
                linksHtml += `<button class="page-link px-3 py-1 rounded border text-sm transition-all ${activeClass}" data-page="${i}">${i}</button>`;
            }
        });

        // --- NÚT NEXT (SAU) ---
        if (currentPage < lastPage) {
            linksHtml += `<button class="page-link px-3 py-1 rounded border text-sm transition-all bg-white text-gray-700 hover:bg-gray-50 border-gray-300" data-page="${currentPage + 1}">»</button>`;
        } else {
            linksHtml += `<button disabled class="px-3 py-1 rounded border border-gray-100 text-gray-300 bg-gray-50 cursor-not-allowed text-sm">»</button>`;
        }

        $('#paginationLinks').html(linksHtml);
    }

    // --- 2. EVENTS: Modals & Pagination Clicks ---

    // Click chuyển trang
    $(document).on('click', '.page-link', function() {
        let page = $(this).data('page');
        fetchDomains(page);
    });

    // Mở / Đóng Modal Thêm
    $('.btn-add').click(() => {
        $('#formAdd')[0].reset();
        $('#modalAdd').removeClass('hidden').addClass('flex');
        setTimeout(() => $('#modalAdd > div').removeClass('scale-95').addClass('scale-100'), 10);
    });
    $('.btn-close-add').click(() => {
        $('#modalAdd > div').removeClass('scale-100').addClass('scale-95');
        setTimeout(() => $('#modalAdd').addClass('hidden').removeClass('flex'), 200);
    });

    // Mở / Đóng Modal Sửa
    $(document).on('click', '.btn-edit', function() {
        const id = $(this).data('id');
        let urlShow = "{{ route('allowed-domain.show', ':id') }}".replace(':id', id);

        $.ajax({
            url: urlShow,
            type: 'GET',
            success: function(response) {
                const data = response.data;
                $('#edit_id').val(data.id);
                $('#edit_domain').val(data.domain);
                $('#edit_description').val(data.description);
                $('#edit_is_active').val(data.is_active);
                
                $('#modalEdit').removeClass('hidden').addClass('flex');
                setTimeout(() => $('#modalEdit > div').removeClass('scale-95').addClass('scale-100'), 10);
            },
            error: function(err) {
                Swal.fire({ icon: "error", title: "Lỗi", text: err.responseJSON?.message || "Không thể lấy thông tin" });
            }
        });
    });
    
    $('.btn-close-edit').click(() => {
        $('#modalEdit > div').removeClass('scale-100').addClass('scale-95');
        setTimeout(() => $('#modalEdit').addClass('hidden').removeClass('flex'), 200);
    });


    // --- 3. CRUD ACTIONS (AJAX SUBMITS) ---

    // Submit Thêm mới
    $('#formAdd').submit(function(e) {
        e.preventDefault();
        let submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('Đang lưu...');

        $.ajax({
            url: "{{ route('allowed-domain.store') }}",
            type: 'POST',
            data: $(this).serialize(),
            success: function() {
                $('.btn-close-add').click();
                Swal.fire({ icon: "success", title: "Thành công", text: "Đã thêm domain!", showConfirmButton: false, timer: 1500 });
                fetchDomains(1); // Load lại trang 1
            },
            error: function(err) {
                Swal.fire({ icon: "error", title: "Thất bại", text: err.responseJSON?.message || 'Có lỗi xảy ra', showConfirmButton: false, timer: 2000 });
            },
            complete: () => submitBtn.prop('disabled', false).text('Thêm mới')
        });
    });

    // Submit Cập nhật
    $('#formEdit').submit(function(e) {
        e.preventDefault();
        const id = $('#edit_id').val();
        let urlUpdate = "{{ route('allowed-domain.update', ':id') }}".replace(':id', id);
        
        let submitBtn = $(this).find('button[type="submit"]');
        submitBtn.prop('disabled', true).text('Đang lưu...');

        $.ajax({
            url: urlUpdate,
            type: 'POST',
            data: $(this).serialize(),
            success: function() {
                $('.btn-close-edit').click();
                Swal.fire({ icon: "success", title: "Thành công", text: "Đã cập nhật domain!", showConfirmButton: false, timer: 1500 });
                fetchDomains(currentPage); // Load lại đúng trang hiện tại
            },
            error: function(err) {
                Swal.fire({ icon: "error", title: "Thất bại", text: err.responseJSON?.message || 'Có lỗi xảy ra', showConfirmButton: false, timer: 2000 });
            },
            complete: () => submitBtn.prop('disabled', false).text('Lưu thay đổi')
        });
    });

    // Xóa
    $(document).on('click', '.btn-delete', function() {
        const id = $(this).data('id');
        let urlDelete = "{{ route('allowed-domain.destroy', ':id') }}".replace(':id', id);

        Swal.fire({
            title: "Xóa domain này?",
            text: "Hành động này không thể hoàn tác!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#111827",
            cancelButtonColor: "#ef4444",
            confirmButtonText: "Vâng, xóa nó!",
            cancelButtonText: "Hủy"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: urlDelete,
                    type: 'POST',
                    data: { _token: '{{ csrf_token() }}' },
                    success: function() {
                        Swal.fire({ icon: "success", title: "Đã xóa!", showConfirmButton: false, timer: 1500 });
                        fetchDomains(currentPage); // Reload lại bảng hiện tại
                    },
                    error: function(err) {
                        Swal.fire({ icon: "error", title: "Thất bại", text: err.responseJSON?.message || 'Không thể xóa', showConfirmButton: false, timer: 2000 });
                    }
                });
            }
        });
    });

    // --- 4. INIT ---
    // Gọi hàm fetch lần đầu tiên khi trang vừa load xong
    fetchDomains(1);
});
</script>
@endsection