@extends('app')

@section('title', 'Pakej')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
    <style>
        .ql-editor {
            min-height: 150px;
        }
    </style>
@endpush

@section('content')
    <!-- Page Header -->
    <div class="mb-6 flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Pakej</h1>
            <p class="mt-1 text-sm text-gray-600">Manage your service packages</p>
        </div>
        <button onclick="openCreateModal()" class="btn btn-primary">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Tambah Pakej
        </button>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="table w-full">
                <thead>
                    <tr>
                        <th>Logo</th>
                        <th>Nama</th>
                        <th>Harga</th>
                        <th>Type</th>
                        <th>Max Users</th>
                        <th>Penerangan</th>
                        <th>Status</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody id="packages-table">
                    <tr>
                        <td colspan="8" class="text-center py-8">
                            <span class="loading loading-spinner loading-lg"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <dialog id="package-modal" class="modal">
        <div class="modal-box max-w-2xl">
            <h3 class="font-bold text-lg mb-4" id="modal-title">Tambah Pakej</h3>
            <form id="package-form" onsubmit="savePackage(event)">
                <input type="hidden" id="package-id">

                <div class="mb-4 space-y-2">
                    <label for="name" class="label">Nama Pakej <span class="text-red-500">*</span></label>
                    <input type="text" id="name" class="input input-bordered w-full" required>
                    <span id="error-name" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="logo" class="label">Logo</label>
                     <div class="flex gap-4 items-center">
                        <div class="flex-1">
                            <input type="file" id="logo" class="file-input file-input-bordered w-full" accept="image/*">
                             <p class="text-xs text-gray-500 mt-1">Max 2MB. Recommended: square aspect ratio.</p>
                        </div>
                        <div id="logo-preview" class="w-24 h-24 rounded-lg bg-gray-100 flex items-center justify-center border-2 border-dashed border-gray-300 hidden">
                            <img id="preview-img" src="" alt="Logo preview" class="max-w-full max-h-full rounded">
                        </div>
                    </div>
                    <span id="error-logo" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="description-editor" class="label">Penerangan <span class="text-red-500">*</span></label>
                    <div id="description-editor" class="bg-white"></div>
                    <input type="hidden" id="description">
                    <span id="error-description" class="text-red-500 text-sm hidden"></span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="mb-4 space-y-2">
                        <label for="price" class="label">Harga <span class="text-red-500">*</span></label>
                        <input type="number" id="price" class="input input-bordered w-full" required>
                        <span id="error-price" class="text-red-500 text-sm hidden"></span>
                    </div>
                    <div class="mb-4 space-y-2">
                        <label for="max_users" class="label">Max Users</label>
                        <input type="number" id="max_users" class="input input-bordered w-full" min="0" placeholder="Leave empty for unlimited">
                        <span id="error-max_users" class="text-red-500 text-sm hidden"></span>
                    </div>
                </div>

                <div class="mb-4 space-y-2">
                    <label for="status" class="label">Status <span class="text-red-500">*</span></label>
                    <select id="status" class="select select-bordered w-full">
                        <option value="active">Aktif</option>
                        <option value="inactive">Tidak Aktif</option>
                    </select>
                </div>


                <div class="modal-action">
                    <button type="button" onclick="closeModal()" class="btn">Batal</button>
                    <button type="submit" id="btn-submit" class="btn btn-primary">
                        <span id="btn-text">Simpan</span>
                        <span id="btn-loading" class="loading loading-spinner hidden"></span>
                    </button>
                </div>
            </form>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

    <!-- View Penerangan Modal -->
    <dialog id="view-description-modal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg mb-4">Package Penerangan</h3>
            <div id="description-content" class="prose max-w-none">
                <!-- Penerangan will be loaded here -->
            </div>
            <div class="modal-action">
                <button onclick="closePeneranganModal()" class="btn">Tutup</button>
            </div>
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>
@endsection

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>
    <script>
        let currentPackageId = null;
        let quill;

        $(document).ready(function() {
            loadPackages();

            quill = new Quill('#description-editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline'],
                        [{'list': 'ordered'}, {'list': 'bullet'}],
                        ['link', 'image']
                    ]
                }
            });

            $('#logo').on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#preview-img').attr('src', e.target.result);
                        $('#logo-preview').removeClass('hidden');
                    };
                    reader.readAsDataURL(file);
                } else {
                    $('#logo-preview').addClass('hidden');
                }
            });
        });

        function loadPackages() {
            $('#packages-table').html(`
                <tr>
                    <td colspan="7" class="text-center py-8">
                        <span class="loading loading-spinner loading-lg"></span>
                    </td>
                </tr>
            `);

            window.authHelper.apiRequest('/api/packages', { method: 'GET' })
                .then(function(response) {
                    renderPackages(response.data.data);
                })
                .catch(function(error) {
                    console.error('Error:', error);
                    $('#packages-table').html(`
                        <tr>
                            <td colspan="7" class="text-center py-8 text-red-500">
                                Failed to load packages.
                            </td>
                        </tr>
                    `);
                });
        }

        function renderPackages(packages) {
            if (!packages || packages.length === 0) {
                $('#packages-table').html(`
                    <tr>
                        <td colspan="7" class="text-center py-8 text-gray-500">
                            Tiada pakej dijumpai.
                        </td>
                    </tr>
                `);
                return;
            }

            let html = '';
            packages.forEach(function(pkg) {
                const logoUrl = pkg.logo ? `/storage/${pkg.logo}` : 'https://via.placeholder.com/40?text=N/A';
                const statusBadge = pkg.status === 'active'
                    ? `<div class="badge badge-success">${pkg.status}</div>`
                    : `<div class="badge badge-error">${pkg.status}</div>`;

                const typeBadge = pkg.is_premium
                    ? `<div class="badge badge-accent">PREMIUM</div>`
                    : `<div class="badge badge-ghost">FREE</div>`;

                // Create a temporary div to strip HTML tags for truncation calculation
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = pkg.description;
                const plainTextPenerangan = tempDiv.textContent || tempDiv.innerText || "";

                let descriptionHtml = '';
                if (plainTextPenerangan.length > 100) {
                    descriptionHtml = plainTextPenerangan.substring(0, 100) + '... ' +
                        `<a href="#" class="text-blue-500 hover:underline" onclick="event.preventDefault(); viewPenerangan(this)">Show more</a>`;
                } else {
                    descriptionHtml = plainTextPenerangan;
                }

                // Store full description in a data attribute to handle special characters
                const descriptionData = encodeURIComponent(pkg.description);

                html += `
                    <tr data-description="${descriptionData}">
                        <td>
                            <div class="avatar">
                                <div class="w-10 rounded">
                                    <img src="${logoUrl}" alt="${pkg.name}" />
                                </div>
                            </div>
                        </td>
                        <td class="font-medium">${pkg.name}</td>
                        <td class="font-medium">${new Intl.NumberFormat('en-MY', { style: 'currency', currency: 'MYR' }).format(pkg.price)}</td>
                        <td>${typeBadge}</td>
                        <td class="font-medium">${(pkg.max_users !== null && pkg.max_users !== undefined) ? pkg.max_users : 'Unlimited'}</td>
                        <td class="text-sm">${descriptionHtml}</td>
                        <td>${statusBadge}</td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="editPackage(${pkg.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deletePackage(${pkg.id}, '${pkg.name}')" class="btn btn-sm btn-ghost text-red-500">
                                    <i data-lucide="trash" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

            $('#packages-table').html(html);
            lucide.createIcons();
        }

        function openCreateModal() {
            currentPackageId = null;
            $('#modal-title').text('Tambah Pakej');
            $('#package-form')[0].reset();
            quill.root.innerHTML = '';
            $('#logo-preview').addClass('hidden');
            $('.text-red-500').addClass('hidden').text('');
            document.getElementById('package-modal').showModal();
        }

        function editPackage(id) {
            currentPackageId = id;
            $('#modal-title').text('Edit Package');
            $('.text-red-500').addClass('hidden').text('');

            window.authHelper.apiRequest(`/api/packages/${id}`, { method: 'GET' })
                .then(function(response) {
                    const pkg = response.data.data;
                    $('#package-id').val(pkg.id);
                    $('#name').val(pkg.name);
                    quill.root.innerHTML = pkg.description;
                    $('#price').val(pkg.price);
                    $('#status').val(pkg.status);
                    $('#max_users').val(pkg.max_users);

                    if (pkg.logo) {
                        $('#preview-img').attr('src', `/storage/${pkg.logo}`);
                        $('#logo-preview').removeClass('hidden');
                    } else {
                        $('#logo-preview').addClass('hidden');
                    }

                    document.getElementById('package-modal').showModal();
                })
                .catch(function(error) {
                    showAlert('Failed to load package data.');
                });
        }

        function savePackage(event) {
            event.preventDefault();
            $('.text-red-500').addClass('hidden').text('');
            $('#btn-submit').prop('disabled', true);
            $('#btn-text').text('Saving...');
            $('#btn-loading').removeClass('hidden');

            const formData = new FormData();
            formData.append('name', $('#name').val());
            formData.append('description', quill.root.innerHTML);
            formData.append('price', $('#price').val());
            formData.append('status', $('#status').val());
            const maxUsersVal = $('#max_users').val();
            if (maxUsersVal !== '') {
                formData.append('max_users', maxUsersVal);
            }

            const logoFile = $('#logo')[0].files[0];
            if (logoFile) {
                formData.append('logo', logoFile);
            }

            const url = currentPackageId ? `/api/packages/${currentPackageId}` : '/api/packages';
            // Laravel handles POST for updates, no _method needed if route is POST

            const token = window.authHelper.getToken();

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    closeModal();
                    loadPackages();
                    showAlert(response.message || 'Package saved successfully!');
                },
                error: function(xhr) {
                    if (xhr.status === 400 || xhr.status === 422) {
                        const errors = xhr.responseJSON.data;
                        Object.keys(errors).forEach(function(key) {
                            $(`#error-${key}`).removeClass('hidden').text(errors[key][0]);
                        });
                    } else {
                        showAlert('An error occurred. Please try again.');
                    }
                },
                complete: function() {
                    $('#btn-submit').prop('disabled', false);
                    $('#btn-text').text('Save');
                    $('#btn-loading').addClass('hidden');
                }
            });
        }

        function deletePackage(id, name) {
            if (!confirm(`Are you sure you want to delete "${name}"?`)) {
                return;
            }

            window.authHelper.apiRequest(`/api/packages/${id}`, { method: 'DELETE' })
                .then(function(response) {
                    loadPackages();
                    showAlert(response.data.message || 'Package deleted successfully.');
                })
                .catch(function(error) {
                    showAlert('Failed to delete package.');
                });
        }

        function closeModal() {
            document.getElementById('package-modal').close();
        }

        function viewPenerangan(button) {
            const descriptionData = $(button).closest('tr').data('description');
            const description = decodeURIComponent(descriptionData);
            $('#description-content').html(description);
            document.getElementById('view-description-modal').showModal();
        }

        function closePeneranganModal() {
            document.getElementById('view-description-modal').close();
        }

        function showAlert(message) {
            if (typeof message === 'string') {
                alert(message);
            } else {
                alert(JSON.stringify(message, null, 2));
            }
        }
    </script>
@endpush