@extends('app')
@section('title_header', 'Terma Syarat')
@section('header', 'Terma Syarat')

@push('style')
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<style>
    #editor {
        height: 150px;
        border: 1px solid #ccc;
    }
    #editEditor {
        height: 150px;
        border: 1px solid #ccc;
    }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card card-outline card-info">
            <div class="card-header">
                <h3 class="card-title">Senarai Terma Syarat</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#createModal">
                        Create
                    </button>
                </div>
            </div>
            <div class="card-body">
                <table class="table table-bordered table-striped" id="termsTable">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Kandungan</th>
                            <th>Tarikh Dibuat</th>
                            <th>Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data akan diisi oleh DataTables -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal Tambah -->
<div class="modal fade" id="createModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Tambah Terma Syarat</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="createForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label>Kandungan</label>
                        <div id="editor"></div>
                        <input type="hidden" id="createContent" name="content">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Edit Terma Syarat</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <form id="editForm">
                <div class="modal-body">
                    <input type="hidden" id="editId" name="id">
                    <div class="form-group">
                        <label>Kandungan</label>
                        <div id="editEditor"></div>
                        <input type="hidden" id="editContentInput" name="content">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>

<script>
let createQuill, editQuill;

$(document).ready(function() {
    // Setup CSRF token for AJAX requests
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    
    // Initialize Quill editors
    createQuill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link'],
                ['clean']
            ]
        }
    });
    
    editQuill = new Quill('#editEditor', {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link'],
                ['clean']
            ]
        }
    });
    
    // Initialize DataTable
    var table = $('#termsTable').DataTable({
        processing: true,
        ajax: {
            url: '/api/terms-conditions',
            type: 'GET',
            dataSrc: 'data'
        },
        columns: [
            {
                data: null,
                render: function(data, type, row, meta) {
                    return meta.row + 1;
                },
                orderable: false
            },
            {
                data: 'content',
                render: function(data, type, row) {
                    const content = $('<div>').html(data).text().substring(0, 100);
                    return content + (content.length >= 100 ? '...' : '');
                }
            },
            {
                data: 'created_at',
                render: function(data, type, row) {
                    return new Date(data).toLocaleDateString('en-GB');
                }
            },
            {
                data: null,
                render: function(data, type, row) {
                    return `
                        <button class="btn btn-sm btn-info" onclick="editItem(${row.id})">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="deleteItem(${row.id})">
                            <i class="fas fa-trash"></i>
                        </button>
                    `;
                },
                orderable: false
            }
        ],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.11.5/i18n/ms.json'
        }
    });
    
    // Form submit
    $('#createForm').on('submit', function(e) {
        e.preventDefault();
        const content = createQuill.root.innerHTML;
        
        if (createQuill.getText().trim().length === 0) {
            alert('Kandungan tidak boleh kosong.');
            return;
        }
        
        $.ajax({
            url: '/api/terms-conditions/store',
            type: 'POST',
            data: { content: content },
            success: function(response) {
                $('#createModal').modal('hide');
                createQuill.setText('');
                table.ajax.reload();
                alert('Berjaya disimpan.');
            },
            error: function(xhr) {
                alert('Gagal menyimpan data.');
            }
        });
    });
    
    $('#editForm').on('submit', function(e) {
        e.preventDefault();
        const id = $('#editId').val();
        const content = editQuill.root.innerHTML;
        
        if (editQuill.getText().trim().length === 0) {
            alert('Kandungan tidak boleh kosong.');
            return;
        }
        
        $.ajax({
            url: '/api/terms-conditions/update/' + id,
            type: 'POST',
            data: { content: content },
            success: function(response) {
                $('#editModal').modal('hide');
                table.ajax.reload();
                alert('Berjaya dikemaskini.');
            },
            error: function(xhr) {
                alert('Gagal mengemaskini data.');
            }
        });
    });
});

function editItem(id) {
    $.ajax({
        url: '/api/terms-conditions/' + id,
        type: 'GET',
        success: function(response) {
            $('#editId').val(response.data.id);
            editQuill.root.innerHTML = response.data.content;
            $('#editModal').modal('show');
        },
        error: function(xhr) {
            alert('Gagal memuat data.');
        }
    });
}

function deleteItem(id) {
    if (confirm('Adakah anda pasti untuk memadam data ini?')) {
        $.ajax({
            url: '/api/terms-conditions/destroy/' + id,
            type: 'DELETE',
            success: function(response) {
                $('#termsTable').DataTable().ajax.reload();
                alert('Berjaya dipadam.');
            },
            error: function(xhr) {
                alert('Gagal memadam data.');
            }
        });
    }
}
</script>
@endpush