@extends('app')

@section('title', 'Arahan Pemadaman Akaun')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
    <style>
        .ql-editor {
            min-height: 200px;
        }
    </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">Arahan Pemadaman Akaun</h1>
            <p class="mt-1 text-sm text-gray-600">Manage your instruction and conditions</p>
        </div>
        <button onclick="openCreateModal()" class="btn btn-primary">
            <i data-lucide="plus" class="w-4 h-4"></i>
            Tambah Terma
        </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>Tajuk</th>
                        <th>Kandungan</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody id="instruction-table">
                    <tr>
                        <td colspan="5" class="text-center py-8">
                            <span class="loading loading-spinner loading-lg"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Create/Edit Modal -->
    <dialog id="instruction-modal" class="modal">
        <div class="modal-box max-w-4xl">
            <h3 class="font-bold text-lg mb-4" id="modal-title">Add Arahan Pemadaman Akaun</h3>
            <form id="instruction-form" onsubmit="saveTerms(event)">
                <input type="hidden" id="instruction-id">

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

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

                <div class="mb-4 space-y-2">
                    <label for="is_active" class="label">Status <span class="text-red-500">*</span></label>
                    <select id="is_active" class="select select-bordered w-full">
                        <option value="1">Aktif</option>
                        <option value="0">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 Kandungan Modal -->
    <dialog id="view-content-modal" class="modal">
        <div class="modal-box max-w-4xl">
            <h3 class="font-bold text-lg mb-4">Arahan Pemadaman Akaun Kandungan</h3>
            <div id="content-display" class="prose max-w-none">
                <!-- Kandungan will be loaded here -->
            </div>
            <div class="modal-action">
                <button onclick="closeKandunganModal()" 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 currentTermsId = null;
        let quill;

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

            quill = new Quill('#content-editor', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'color': [] }, { 'background': [] }],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'indent': '-1'}, { 'indent': '+1' }],
                        [{ 'align': [] }],
                        ['link', 'image'],
                        ['clean']
                    ]
                }
            });
        });

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

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

        function renderTerms(instruction) {
            if (!instruction || instruction.length === 0) {
                $('#instruction-table').html(`
                    <tr>
                        <td colspan="5" class="text-center py-8 text-gray-500">
                            No instruction and conditions found.
                        </td>
                    </tr>
                `);
                return;
            }

            let html = '';
            instruction.forEach(function(term) {
                const statusBadge = term.is_active
                    ? `<div class="badge badge-success">Aktif</div>`
                    : `<div class="badge badge-error">Tidak Aktif</div>`;

                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = term.content;
                const plainTextContent = tempDiv.textContent || tempDiv.innerText || "";

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

                const contentData = encodeURIComponent(term.content);
                const createdAt = new Date(term.created_at).toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: 'short',
                    day: 'numeric'
                });

                html += `
                    <tr data-content="${contentData}">
                        <td class="font-medium">${term.title}</td>
                        <td class="text-sm">${contentHtml}</td>
                        <td>${statusBadge}</td>
                        <td>${createdAt}</td>
                        <td>
                            <div class="flex gap-2">
                                <button onclick="editTerms(${term.id})" class="btn btn-sm btn-ghost">
                                    <i data-lucide="edit" class="w-4 h-4"></i>
                                </button>
                                <button onclick="deleteTerms(${term.id}, '${term.title}')" class="btn btn-sm btn-ghost text-red-500">
                                    <i data-lucide="trash" class="w-4 h-4"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });

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

        function openCreateModal() {
            currentTermsId = null;
            $('#modal-title').text('Add Arahan Pemadaman Akaun');
            $('#instruction-form')[0].reset();
            quill.root.innerHTML = '';
            $('.text-red-500').addClass('hidden').text('');
            document.getElementById('instruction-modal').showModal();
        }

        function editTerms(id) {
            currentTermsId = id;
            $('#modal-title').text('Edit Arahan Pemadaman Akaun');
            $('.text-red-500').addClass('hidden').text('');

            window.authHelper.apiRequest(`/api/account-removal-instructions/${id}`, { method: 'GET' })
                .then(function(response) {
                    const term = response.data.data;
                    $('#instruction-id').val(term.id);
                    $('#title').val(term.title);
                    quill.root.innerHTML = term.content;
                    $('#is_active').val(term.is_active ? '1' : '0');

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

        function saveTerms(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('title', $('#title').val());
            formData.append('content', quill.root.innerHTML);
            formData.append('is_active', $('#is_active').val());

            const url = currentTermsId ? `/api/account-removal-instructions/${currentTermsId}` : '/api/account-removal-instructions';

            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();
                    loadTerms();
                    showAlert(response.message || 'Terms and conditions 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 deleteTerms(id, title) {
            if (!confirm(`Are you sure you want to delete "${title}"?`)) {
                return;
            }

            window.authHelper.apiRequest(`/api/account-removal-instructions/${id}`, { method: 'DELETE' })
                .then(function(response) {
                    loadTerms();
                    showAlert(response.data.message || 'Terms and conditions deleted successfully.');
                })
                .catch(function(error) {
                    showAlert('Failed to delete instruction and conditions.');
                });
        }

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

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

        function closeKandunganModal() {
            document.getElementById('view-content-modal').close();
        }

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