Embed

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calendario de Recogidas - Teleport</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #013a63;
            color: white;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        h1 {
            text-align: center;
            padding: 20px;
        }

        .container {
            display: flex;
            justify-content: center;
            padding: 20px;
        }

        #calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-gap: 10px;
            width: 90%;
            max-width: 800px;
            margin: 20px auto;
        }

        .day {
            padding: 20px;
            background-color: #0369a1;
            text-align: center;
            cursor: pointer;
            border-radius: 5px;
        }

        .day:hover {
            background-color: #0284c7;
        }

        .hidden {
            display: none;
        }

        #form-container, #report-container {
            text-align: center;
            margin-top: 20px;
        }

        input, select, button {
            padding: 10px;
            margin: 5px;
            border-radius: 5px;
            border: none;
            font-size: 14px;
        }

        button {
            background-color: #0369a1;
            color: white;
            cursor: pointer;
        }

        button:hover {
            background-color: #0284c7;
        }

        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            background-color: white;
            color: black;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }

        th {
            background-color: #0369a1;
            color: white;
        }
    </style>
</head>
<body>

    <h1>Calendario de Recogidas - Teleport</h1>

    <div class="container">
        <button id="generateReportBtn">Generar Reporte</button>
    </div>

    <div id="calendar">
        
    </div>

    <div id="form-container" class="hidden">
        <h2>Añadir Recogida</h2>
        <form id="eventForm">
            <label for="clientName">Nombre del Cliente:</label><br>
            <input type="text" id="clientName" name="clientName" required><br><br>
            <label for="type">Tipo de Recogida:</label><br>
            <input type="text" id="type" name="type" required><br><br>
            <label for="price">Precio:</label><br>
            <input type="number" id="price" name="price" required><br><br>
            <label for="completed">¿Completado?</label><br>
            <select id="completed" name="completed">
                <option value="true">Sí</option>
                <option value="false">No</option>
            </select><br><br>
            <button type="submit">Añadir</button>
        </form>
    </div>

    <div id="report-container" class="hidden">
        <h2>Reporte de Recogidas</h2>
        <table id="reportTable">
            <thead>
                <tr>
                    <th>Nombre del Cliente</th>
                    <th>Tipo</th>
                    <th>Precio</th>
                    <th>Estado</th>
                </tr>
            </thead>
            <tbody id="reportList">
                
            </tbody>
        </table>
        <button id="closeReportBtn">Cerrar Reporte</button>
    </div>

<script>
    const calendar = document.getElementById('calendar');
    const formContainer = document.getElementById('form-container');
    const eventForm = document.getElementById('eventForm');
    const generateReportBtn = document.getElementById('generateReportBtn');
    const reportContainer = document.getElementById('report-container');
    const reportList = document.getElementById('reportList');
    const closeReportBtn = document.getElementById('closeReportBtn');

    const daysInMonth = 30; // Generamos 30 días en este ejemplo
    let selectedDay = null;
    let eventsByDate = {};

    // Generar días del calendario dinámicamente
    for (let day = 1; day <= daysInMonth; day++) {
        const dayDiv = document.createElement('div');
        dayDiv.className = 'day';
        dayDiv.textContent = day;
        dayDiv.onclick = () => selectDay(day);
        calendar.appendChild(dayDiv);
    }

    function selectDay(day) {
        selectedDay = day;
        formContainer.classList.remove('hidden');
    }

    eventForm.onsubmit = function (e) {
        e.preventDefault();
        const clientName = document.getElementById('clientName').value;
        const type = document.getElementById('type').value;
        const price = document.getElementById('price').value;
        const completed = document.getElementById('completed').value === 'true';

        if (!eventsByDate[selectedDay]) {
            eventsByDate[selectedDay] = [];
        }

        eventsByDate[selectedDay].push({ clientName, type, price, completed });

        eventForm.reset();
        formContainer.classList.add('hidden');
    };

    generateReportBtn.onclick = function () {
        reportList.innerHTML = '';
        for (const day in eventsByDate) {
            eventsByDate[day].forEach(event => {
                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                    <td>${event.clientName}</td>
                    <td>${event.type}</td>
                    <td>$${event.price}</td>
                    <td>${event.completed ? 'Completado' : 'No Completado'}</td>
                `;
                reportList.appendChild(newRow);
            });
        }
        reportContainer.classList.remove('hidden');
    };

    closeReportBtn.onclick = function () {
        reportContainer.classList.add('hidden');
    };
</script>

</body>
</html>