<?php
    // 1. Consume the API with cURL
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, "https://jsonplaceholder.typicode.com/todos");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close($ch);

    // 2. Convert to array
    $data = json_decode($response, true);

    // 3. Take only the first 20 records
    $data = array_slice($data, 0, 20);

    // 4. Create rows for the grid with the fields you need
    $rows = [];
    foreach ($data as $item) {
        $id = $item['id'];
        $rows[] = [
            'id' => $id,
            'name' => "Usuario $id",
            'email' => "usuario$id@mail.com",
            'created_at' => date('Y-m-d', strtotime("-$id days")),
            'title' => $item['title'],
            'completed' => $item['completed'] ? 'Sí' : 'No'
        ];
    }

    // 5. Define grid columns
    $columns = [
        ['name'=>'id','label'=>'ID','type'=>'number'],
        ['name'=>'name','label'=>'Nombre','type'=>'text'],
        ['name'=>'email','label'=>'Correo','type'=>'text'],
        ['name'=>'created_at','label'=>'Fecha','type'=>'date'],
        ['name'=>'title','label'=>'Título','type'=>'text'],
        ['name'=>'completed','label'=>'Completado','type'=>'text'],
    ];

    // 6. Create and configure the grid
    $grid = new ArtiGrid();
    $grid->perPage(10);
    $grid->addCustomBtn(
        'btn btn-sm btn-info', // class
        'ver',                 // action JS
        '', // icon
        []                     // conditions
    );

    // 7. Prepare JSON for the grid
    $jsonData = [
        'columns' => $columns,
        'rows' => $rows
    ];

    // 8. Render the grid
    echo $grid->crudJson($jsonData)->render();
?>

<script>
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.view_action');
        if (!btn) return;

        alert('demo');

        // example: read data-attributes 
        // console.log(btn.dataset.id, btn.dataset.action);
    }, true);
</script>