++

*$<x-app-layout>
    <x-slot name="header">
        <div class="d-flex justify-content-start align-items-center py-2">
            <strong>Data Table: </strong>
        </div>
    </x-slot>

    <div class="container mx-auto py-10">
        <div class="flex flex-wrap -mx-1">
            <div class="w-full px-1">
                <!-- Data Table -->
                <div class="my-2 bg-white shadow rounded-lg">
                    <div class="px-4 py-2">
                        <table class="w-full" id="dataTableBody">
                            <thead>
                                <tr class="border-b border-gray-200 text-lg">
                                    <th class="pb-1">Name</th>
                                    <th class="pb-1">Sponsor</th>
                                    <th class="pb-1">Countries</th>
                                    <th class="pb-1">URL</th>
                                    <th class="pb-1">Endpoint</th>
                                    <th class="pb-1">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
@foreach($links as $link)
    <tr id="link-{{ $link->id }}">
        <td class="name">{{ $link->name }}</td>
        <td class="sponsor">{{ $link->sponsor }}</td>
        <td class="countries">{{ $link->countries }}</td>
        <td class="url">{{ $link->url }}</td>
        <td class="endpoint">{{ 'https://ado365n.store/' . $link->endpoint }}</td>
        <td>
            <button class="edit-btn" data-id="{{ $link->id }}">Edit</button>
            <button class="save-btn" data-id="{{ $link->id }}" style="display: none;">Save</button>
        </td>
    </tr>
@endforeach
<!-- Input fields within the table -->
<tr>
    <td><input type="text" class="form-control" id="name" name="name" required></td>
    <td><input type="text" class="form-control" id="sponsor" name="sponsor" required></td>
    <td><input type="text" class="form-control" id="countries" name="countries" required></td>
    <td><input type="text" class="form-control" id="url" name="url" required></td>
    td></td>
    <td>
    <x-button type="button" class="px-8 py-2 bg-blue-500 text-white font-medium rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="create-link">
                            {{ __('Generate') }}
                        </x-button>
    </td>
</tr>
</tbody>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
    .highlight {
        background-color: yellow;
    }
    </style>

    @vite('resources/js/reports.js')

    <style>
        /* Add custom styles for table row highlighting */
        .table tbody tr:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }
        /* Reduce padding and margins throughout the page */
        * {
            margin: 0;
            padding: 0;
        }
        /* Then add back some padding where needed */
        .px-4 {
            padding-left: 1rem;
            padding-right: 1rem;
        }
        .py-2 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
        .py0 {
            padding-top: 2.5rem;
            padding-bottom: 2.5rem;
        }
        .my-2 {
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .mx-1 {
            margin-left: 0.25rem;
            margin-right: 0.25rem;
        }
    </style>





<script>
$(document).ready(function(){
    $(".endpoint").click(function(){
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(this).text()).select();
        document.execCommand("copy");
        $temp.remove();

        $(this).addClass('highlight');
        setTimeout(() => $(this).removeClass('highlight'), 1000);
    });

    $(".edit-btn").click(function() {
        const id = $(this).data('id');
        const row = $(`#link-${id}`);

        ['name', 'sponsor', 'countries', 'url'].forEach(field => {
            const cell = row.find(`.${field}`);
            const value = cell.text();
            cell.html(`<input type="text" value="${value}" />`);
        });

        $(this).hide();
        row.find('.save-btn').show();
    });

    $(".save-btn").click(function() {        const id = $(this).data('id');
        const row = $(`#link-${id}`);

        const data = {
            '_token': '{{ csrf_token() }}',
            '_method': 'PUT',
        };

        ['name', 'sponsor', 'countries', 'url'].forEach(field => {
            const input = row.find(`.${field} input`);
            data[field] = input.val();
            input.replaceWith(data[field]);
        });

        axios.post(`/links/${id}`, data)
            .then(() => {
                $(this).hide();
                row.find('.edit-btn').show();
            });
    });

    $("#create-link").click(function() {
        const data = {
            '_token': '{{ csrf_token() }}',
        };

        ['name', 'sponsor', 'countries', 'url'].forEach(field => {
            data[field] = $(`#${field}`).val();
            $(`#${field}`).val('');
        });

        axios.post('/links', data)
            .then(({ data }) => {
                $('tbody').prepend(`
                    <tr id="link-${data.id}">
                        <td class="name">${data.name}</td>
                        <td class="sponsor">${data.sponsor}</td>
                        <td class="countries">${data.countries}</td>
                        <td class="url">${data.url}</td>
                        <td class="endpoint">https://ado365n.store/${data.endpoint}</td>
                        <td>
                            <button class="edit-btn" data-id="${data.id}">Edit</button>
                            <button class="save-btn" data-id="${data.id}" style="display: none;">Save</button>
                        </td>
                    </tr>
                `);
                $
    });
});
</script>
</x-app-layout>