@extends('layouts.admin.app')

@section('title', 'Quản lý Tuyến Đường Phổ Biến (Popular Routes)')

@section('content')
    <div class="space-y-6">

        {{-- HEADER --}}
        <div class="bg-white rounded-lg p-4 shadow-sm flex justify-between items-center">
            <h1 class="text-lg font-semibold text-gray-800">
                Quản lý Tuyến Đường Phổ Biến
            </h1>

            <button id="openAddModal" class=" 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>

        {{-- BẢNG DỮ LIỆU --}}
        <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>

    {{-- MODAL THÊM MỚI --}}

    @include('admin.popular_route.create')
    @include('admin.popular_route.edit')

    <script>
        const ROUTES = {
            list: "{{ route('admin.popular_routes.list') }}"
        };

        function previewAddImage(event) {
            var 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');
            } else {
                output.src = '';
                output.classList.add('hidden');
                document.getElementById('addUploadIcon').classList.remove('hidden');
            }
        }

        function previewEditImage(event) {
            var 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');
            }
        }

        $(document).ready(function() {
            loadPaginatedData(ROUTES.list, 1, renderData);

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

            $('.closeAddModal').click(function() {
                $('#addModal').addClass('hidden');
                $('#addForm')[0].reset();
                document.getElementById('addPreviewImage').src = '';
                document.getElementById('addPreviewImage').classList.add('hidden');
                document.getElementById('addUploadIcon').classList.remove('hidden');
            });

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

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

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

            $(document).on('submit', '#editForm', function(e) {
                e.preventDefault();
                var form = $(this);
                var $btn = form.find("button[type='submit']");
                var originalText = $btn.text().trim();
                var formData = new FormData(form[0]);

                $.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(response) {
                        showAlert('Cập nhật Tuyến Đường thành công!', 'success');
                        $('.closeEditModal').click();
                        loadPaginatedData(ROUTES.list, 1, renderData);
                    },
                    error: function(xhr) {
                        handleAjaxError(xhr);
                    },
                    complete: function() {
                        clearBtnLoading($btn, originalText);
                    }
                });
            });

            $(document).on('click', '.edit-btn', function() {
                const id = $(this).data('id');
                $.ajax({
                    url: `/admin/popular-routes/${id}/edit`,
                    type: "GET",
                    success: function(response) {
                        const data = response.data;
                        $("#editId").val(data.id);
                        $("#editFrom").val(data.from);
                        $("#editTo").val(data.to);
                        $("#editSeatType").val(data.seat_type);
                        $("#editPrice").val(data.price);
                        $("#editBookingUrl").val(data.booking_url);
                        $("#editOrderIndex").val(data.order_index);
                        $("#editStatus").prop('checked', data.status == 1);
                        $("#editForm").attr("action", `/admin/popular-routes/${id}`);

                        if (data.image_url) {
                            $("#editPreviewImage").attr('src', data.image_url).removeClass(
                                'hidden');
                            $("#editUploadIcon").addClass('hidden');
                        } else {
                            $("#editPreviewImage").attr('src', '').addClass('hidden');
                            $("#editUploadIcon").removeClass('hidden');
                        }

                        $("#editModal").removeClass("hidden").addClass("flex");
                    },
                    error: function(xhr) {
                        showAlert("Không thể tải dữ liệu!", "error");
                    }
                });
            });

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

                $.ajax({
                    url: `/admin/popular-routes/${id}`,
                    type: 'DELETE',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        showAlert('Xóa Tuyến Đường thành công', 'success');
                        loadPaginatedData(ROUTES.list, 1, renderData);
                    },
                    error: function(xhr) {
                        showAlert('Có lỗi xảy ra: ' + xhr.statusText, 'error');
                    }
                });
            });
        });

        function renderData(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;');
            };

            const formatCurrency = (number) => {
                return new Intl.NumberFormat('vi-VN', {
                    style: 'currency',
                    currency: 'VND'
                }).format(number);
            };

            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-left text-xs font-medium text-gray-500 uppercase tracking-wider">Hành trình</th>
                    {{-- [TEMPORARILY HIDDEN: Cột Giá trong JS]
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Loại Ghế & Giá</th>
                    [END HIDDEN] --}}
                    <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">Trạng thái</th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">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="3" class="px-6 py-8 text-center text-gray-400">Không có dữ liệu Tuyến Đường</td></tr>`;
            } else {
                data.forEach((item, index) => {
                    const from = escapeHtml(item.from);
                    const to = escapeHtml(item.to);
                    const seatType = escapeHtml(item.seat_type);
                    /* [HIDDEN PRICE] const price = formatCurrency(item.price); [END HIDDEN] */

                    const statusBadge = item.status == 1 ?
                        '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Hiển thị</span>' :
                        '<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Ẩn</span>';

                    let imageHtml = item.image_url ?
                        `<img src="${item.image_url}" class="w-16 h-10 object-cover rounded shadow-sm shrink-0" alt="Tuyến Xe">` :
                        `<div class="w-16 h-10 bg-gray-100 rounded text-gray-400 flex items-center justify-center shrink-0"><i class="fas fa-bus"></i></div>`;

                    html += `
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center gap-4">
                                ${imageHtml}
                                <div>
                                    <div class="text-sm font-bold text-gray-900 flex items-center gap-2">
                                        <span class="text-blue-600">${from}</span>
                                        <i class="fas fa-arrow-right text-xs text-gray-400"></i>
                                        <span class="text-red-500">${to}</span>
                                    </div>
                                    <div class="text-xs text-gray-500 mt-1">${item.booking_url ? `<a href="${item.booking_url}" target="_blank" class="text-blue-500 hover:underline"><i class="fas fa-link"></i> Link Book Vé</a>` : 'Không có link đặt vé'}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="text-sm text-gray-800 font-medium block">${seatType}</span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            ${statusBadge}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                            <button class="edit-btn text-blue-600 hover:text-blue-900 mr-3" data-id="${escapeHtml(item.id)}" title="Chỉnh sửa"><i class="fas fa-edit"></i></button>
                            <button class="delete-btn text-red-600 hover:text-red-900" data-id="${escapeHtml(item.id)}" title="Xóa"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                `;
                });
            }

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