@using Microsoft.AspNetCore.Mvc.Localization
@using Berufsschule_HAM.Models
@model HomeIndexViewModel
@inject IViewLocalizer T
@{
    ViewData["Title"] = T["Home Page"];
}


<div class="container py-4">
    <h2 class="mb-3">@T["Overview"]</h2>

    
    <div class="mb-4 d-flex flex-wrap gap-2">
        <button class="btn btn-outline-primary">Create user</button>
        <button class="btn btn-outline-secondary">Update user</button>
        <button class="btn btn-outline-danger">Delete user</button>
        <button class="btn btn-outline-primary">Create asset</button>
        <button class="btn btn-outline-primary">Create location</button>
        <button class="btn btn-outline-secondary">Update location</button>
        <button class="btn btn-outline-danger">Delete location</button>
    </div>

    
    <div class="table-responsive">
        <table class="table table-striped align-middle">
            <thead>
                <tr>
                    <th>User</th>
                    <th>Asset ID</th>
                    <th>Asset Name</th>
                    <th>Location</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            @{
                foreach (AssetsTableViewModel assetsTableViewModel in Model.AssetsTableViewModels)
                {
                <tr>
                    <td>@assetsTableViewModel.UserUID</td>
                    <td>@assetsTableViewModel.AssetCn</td>
                    <td>@assetsTableViewModel.AssetName</td>
                    <td>@assetsTableViewModel.LocationName</td>
                    <td>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-primary">Update</button>
                            <button class="btn btn-sm btn-danger btn-delete" 
                                data-asset-id="@assetsTableViewModel.AssetCn"
                                data-bs-toggle="modal"
                                data-bs-target="#deleteModal">
                                🗑️ Delete
                            </button>
                        </div>
                    </td>
                </tr>
                }
            }
            </tbody>
        </table>
    </div>
</div>

<!-- Asset Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the asset <strong id="assetName"></strong> (ID: <span id="assetId"></span>)?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="post" action="">
                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    document.addEventListener('DOMContentLoaded', () => {
        const deleteModal = document.getElementById('deleteModal');
        let currentButton = null; // The delete button that opened the modal

        deleteModal.addEventListener('show.bs.modal', event => {
            currentButton = event.relatedTarget; // Button that triggered the modal
            const assetId = currentButton.getAttribute('data-asset-id');
            const assetName = currentButton.getAttribute('data-asset-name');

            deleteModal.querySelector('#assetId').textContent = assetId;
            deleteModal.querySelector('#assetName').textContent = assetName;

            // Store the delete URL for later use
            deleteModal.querySelector('#deleteForm').dataset.url = `/Assets/Delete?cn=${assetId}`;
        });

        // Handle submit of deleteForm via fetch()
        const deleteForm = document.getElementById('deleteForm');
        deleteForm.addEventListener('submit', async e => {
            e.preventDefault();

            const url = deleteForm.dataset.url;
            const assetId = deleteModal.querySelector('#assetId').textContent;

            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }//,
                    //body: JSON.stringify({ id: assetId }) // Use this for Post requests with [FromBody] parameters like in /Groups/Update
                });

                const result = await response.json();

                if (result.success) {
                    // Close the modal
                    const modal = bootstrap.Modal.getInstance(deleteModal);
                    modal.hide();

                    // Remove the row from the table
                    const row = currentButton.closest('tr');
                    row.classList.add('table-danger');
                    setTimeout(() => row.remove(), 300);

                    showToast('Asset deleted successfully', 'success');
                } else {
                    showToast(`❌ ${result.reason}: ${result.exception || 'Unknown error'}`, 'danger');
                }
            } catch (error) {
                console.error(error);
                showToast('Error contacting server', 'danger');
            }
        });

        // Simple toast helper
        function showToast(message, type) {
            const toastContainer = document.getElementById('toastContainer') || createToastContainer();
            const toast = document.createElement('div');
            toast.className = `toast align-items-center text-white bg-${type} border-0`;
            toast.role = 'alert';
            toast.innerHTML = `
                <div class="d-flex">
                    <div class="toast-body">${message}</div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
                </div>
            `;
            toastContainer.appendChild(toast);
            const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
            bsToast.show();
            toast.addEventListener('hidden.bs.toast', () => toast.remove());
        }

        function createToastContainer() {
            const container = document.createElement('div');
            container.id = 'toastContainer';
            container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
            document.body.appendChild(container);
            return container;
        }
    });
</script>
@* <script>
    document.addEventListener('DOMContentLoaded', () => {
        alert("DEBUG@1");
        const deleteModal = document.getElementById('deleteModal');
        deleteModal.addEventListener('show.bs.modal', event => {
            alert("DEBUG@2");
            const button = event.relatedTarget; // Button that triggered the modal
            const assetId = button.getAttribute('data-asset-id');
            const assetName = button.getAttribute('data-asset-name');

            // Update modal content
            deleteModal.querySelector('#assetId').textContent = assetId;
            deleteModal.querySelector('#assetName').textContent = assetName;

            // Set the form action dynamically
            const form = deleteModal.querySelector('#deleteForm');
            form.action = `/Assets/Delete/${assetId}`; // <-- adjust controller/action as needed
        });
    });
</script> *@

<!-- 

In case someone wants to reread this:

<div class="text-center">
    <h1 class="display-4">Crashcourse zu "MVC"</h1>
    <p>Die HTML, die grad gerendert wird, liegt in /Views/Home/ - dort sollte auch das Login später rein (bspw. als Login.cshtml)</p>
    <p>Die Web-App folgt der MVC Struktur. D.h. man hat ein Model, ein View und einen Controller. (Wobei dieses View hier hat kein Model. Ist also mehr oder weniger optional.)</p>
    <h2>McDonalds Vergleich:</h2>
    <p>Der Controller ist der Kassierer; der nimmt die Informationen entgegen, verarbeitet diese und setzt eine Bestellnotiz zusammen.</p>
    <p>Das Model ist die Bestellnotiz, die zur Küche weitergegeben wird mit den Informationen, wie es zubereitet werden muss.</p>
    <p>Der View ist der Angestellte, der die Burger zusammensetzt; er kocht nichts und macht nichts groß kompliziertes, sondern tut nur die Teile in den Burger und gibt das Ergebnis zum Kassierer (d.h. Controller).</p>
    <h2>Normale Erklärung:</h2>
    <p>Ein Controller ist zwingend erforderlich und stellt den Endpoint unter einer Route bereit (d.h. das, was man im Browser eingibt, bspw. "/Home/Index")</p>
    <p>Im Controller von diesem View ("/Controllers/HomeControllers.cs") findet man ein simples "return View();", was dafür sorgt, dass einfach diese .cshtml returned wird.</p>
    <p>("Warum diese .cshtml?" - Bestimmt er selber anhand der Controller Route. Die Controller Route setzt er zusammen aus dem Namen der Klasse (wenn oberhalb der Klasse "[Route("[controller]")]" steht) und dem, was man vor eine Methode schreibt, bspw. "[HttpGet("Index")]" -> "/Home/Index" und "[HttpGet("/")]" -> "/".)</p>
    <p>Wenn man Informationen vom Controller an das View übergeben will, tut man das mit einem Model; bspw. "return View(new AssetViewModel { cn = assetName, id = assetId });" </p>
    <p>Ein Model ist ganz einfach eine Klasse, wie man sie kennt.</p>
    <p>Logik kommt in den Controller und das HTML kommt in das View (... in der Praxis kommt ins View öfters mal auch bissl mehr Logik rein. Lässt sich nicht verhindern.)</p>
</div>
-->