(function() {
    // Crear e insertar el estilo CSS
    const style = document.createElement('style');
    style.innerHTML = `
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7f9;
            margin: 0;
            padding: 20px;
        }

        #travelCalcContainer {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            border: 2px solid #0074D9;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            color: #0074D9;
            margin-bottom: 20px;
            font-size: 24px;
        }

        h3 {
            color: #0074D9;
            margin-bottom: 10px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #333;
            font-weight: bold;
        }

        input, select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        button {
            flex: 1;
            padding: 12px;
            background-color: #0074D9;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
        }

        button:hover {
            background-color: #005bb5;
        }

        .clear-button {
            background-color: #f44336;
        }

        .clear-button:hover {
            background-color: #d32f2f;
        }

        #result {
            margin-top: 20px;
            padding: 20px;
            background-color: #FF851B;
            color: white;
            border-radius: 5px;
        }

        #result h2, #result p {
            color: white;
        }

        .hidden {
            display: none;
        }

        .percent-input {
            position: relative;
        }

        .percent-input input {
            padding-right: 50px;
        }

        .percent-input::after {
            content: '%';
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #333;
            font-size: 16px;
        }
    `;
    document.head.appendChild(style);

    // Crear el contenido de la calculadora de costos de viaje
    const container = document.getElementById('travelCalcContainer');
    container.innerHTML = `
        <h1>Travel Cost Calculator</h1>

        <div class="form-group">
            <label for="numPeople">Number of travelers:</label>
            <input type="number" id="numPeople" min="1" value="1" oninput="generatePercentageFields()">
        </div>

        <div class="form-group">
            <label for="numChildren">Number of children under 2:</label>
            <input type="number" id="numChildren" min="0" value="0">
        </div>

        <div class="form-group">
            <label for="tripType">Trip type:</label>
            <select id="tripType" onchange="toggleCompanyField()">
                <option value="" selected>Select one</option>
                <option value="business">Business</option>
                <option value="vacation">Vacation</option>
                <option value="adventure">Adventure</option>
            </select>
        </div>

        <div class="form-group">
            <label for="numDays">Number of days:</label>
            <input type="number" id="numDays" min="1" value="1">
        </div>

        <div class="form-group">
            <label for="flightCost">Flight cost (USD):</label>
            <input type="number" id="flightCost" min="0" value="0">
        </div>

        <div class="form-group">
            <label for="transportCost">Transport cost in destination (USD):</label>
            <input type="number" id="transportCost" min="0" value="0">
        </div>

        <div class="form-group">
            <label for="accommodationCost">Accommodation cost (USD):</label>
            <input type="number" id="accommodationCost" min="0" value="0">
        </div>

        <div class="form-group">
            <label for="foodCost">Food cost (USD):</label>
            <input type="number" id="foodCost" min="0" value="0">
        </div>

        <div id="vacationAdventureFields" class="form-group hidden">
            <label for="activitiesCost">Activities cost (USD):</label>
            <input type="number" id="activitiesCost" min="0" value="0">
        </div>

        <div class="form-group">
            <label for="extraCosts">Percentage for extra costs:</label>
            <select id="extraCosts">
                <option value="0">0%</option>
                <option value="10">10%</option>
                <option value="20">20%</option>
                <option value="30">30%</option>
            </select>
        </div>

        <div id="companyPercentageField" class="form-group hidden">
            <label for="companyPercentage">What percentage of the trip will be paid by the company?</label>
            <div class="percent-input">
                <input type="number" id="companyPercentage" min="0" max="100" value="0">
            </div>
        </div>

        <div id="percentageContainer" class="form-group hidden">
            <h3>Payment percentages by traveler</h3>
        </div>

        <div class="button-group">
            <button id="calculateBtn">Calculate Total Cost</button>
            <button class="clear-button" id="clearBtn">Clear Fields</button>
        </div>

        <div id="result" class="hidden">
            <h2>Estimated Cost</h2>
            <p id="totalCost"></p>
            <div id="paymentDetails"></div>
            <p id="savingsSuggestions"></p>
        </div>
    `;

    // Funciones añadidas globalmente
    window.toggleCompanyField = toggleCompanyField;
    window.generatePercentageFields = generatePercentageFields;

    document.getElementById('calculateBtn').addEventListener('click', calculateCost);
    document.getElementById('clearBtn').addEventListener('click', clearFields);

    // Función para mostrar u ocultar el campo de porcentaje de la empresa
    function toggleCompanyField() {
        const tripType = document.getElementById('tripType').value;
        const companyField = document.getElementById('companyPercentageField');
        const vacationFields = document.getElementById('vacationAdventureFields');
        const percentageContainer = document.getElementById('percentageContainer');

        companyField.classList.toggle('hidden', tripType !== 'business');
        vacationFields.classList.toggle('hidden', tripType !== 'vacation' && tripType !== 'adventure');
        percentageContainer.classList.toggle('hidden', tripType === '');
    }

    // Generar campos de porcentaje por viajero
    function generatePercentageFields() {
        const numPeople = parseInt(document.getElementById('numPeople').value) || 1;
        const percentageContainer = document.getElementById('percentageContainer');
        percentageContainer.innerHTML = '';  // Limpiar campos previos

        for (let i = 1; i <= numPeople; i++) {
            const div = document.createElement('div');
            div.innerHTML = `
                <label for="person${i}">Traveler ${i}'s payment percentage:</label>
                <div class="percent-input">
                    <input type="number" id="person${i}" min="0" max="100" value="100">
                </div>`;
            percentageContainer.appendChild(div);
        }

        percentageContainer.classList.remove('hidden');
    }

    // Función para calcular el costo total
    function calculateCost() {
        if (!validateTravelerPercentages()) {
            return;
        }

        const numPeople = parseFloat(document.getElementById('numPeople').value) || 1;
        const numDays = parseFloat(document.getElementById('numDays').value) || 1;
        const transportCost = parseFloat(document.getElementById('transportCost').value) || 0;
        const flightCost = parseFloat(document.getElementById('flightCost').value) || 0;
        const accommodationCost = parseFloat(document.getElementById('accommodationCost').value) || 0;
        const foodCost = parseFloat(document.getElementById('foodCost').value) || 0;
        const extraCosts = parseFloat(document.getElementById('extraCosts').value) || 0;

        let totalCost = (flightCost + transportCost + accommodationCost + foodCost) * numPeople;

        if (document.getElementById('tripType').value === 'vacation' || document.getElementById('tripType').value === 'adventure') {
            const activitiesCost = parseFloat(document.getElementById('activitiesCost').value) || 0;
            totalCost += activitiesCost * numPeople;
        }

        const extraCostTotal = totalCost * (extraCosts / 100);
        const totalWithExtras = totalCost + extraCostTotal;
        document.getElementById('totalCost').textContent = `Estimated total cost: $${totalWithExtras.toFixed(2)} USD`;

        // Detalles de pago
        const paymentDetailsDiv = document.getElementById('paymentDetails');
        paymentDetailsDiv.innerHTML = '';

        if (document.getElementById('tripType').value === 'business') {
            const companyPercentage = parseFloat(document.getElementById('companyPercentage').value) || 0;
            const companyPayment = (totalWithExtras * (companyPercentage / 100)).toFixed(2);
            paymentDetailsDiv.innerHTML += `<p>The company will pay: $${companyPayment} USD</p>`;
        }

        // Calcular cuánto pagará cada viajero
        for (let i = 1; i <= numPeople; i++) {
            const paymentPercentage = parseFloat(document.getElementById(`person${i}`).value) || 100;
            const paymentPerPerson = (totalWithExtras * (paymentPercentage / 100)).toFixed(2);
            const paymentPerDay = (paymentPerPerson / numDays).toFixed(2);
            paymentDetailsDiv.innerHTML += `<p>Traveler ${i} will pay: $${paymentPerPerson} USD (per day: $${paymentPerDay} USD)</p>`;
        }

        // Sugerencias de ahorro aleatorias
        const suggestions = [
            "Consider booking your flights in advance for better prices.",
            "Look for accommodation discounts or bundle deals.",
            "Use public transportation instead of taxis to save money.",
            "Travel during the off-season to avoid peak prices.",
            "Share accommodation or rental costs with other travelers.",
            "Bring your own snacks to avoid high food prices at the airport.",
            "Use travel rewards or points to reduce the cost of flights or hotels.",
            "Check for free activities at your destination.",
            "Stay in hostels or budget hotels instead of luxury accommodations.",
            "Cook your own meals instead of eating out every day."
        ];

        const randomIndex = Math.floor(Math.random() * suggestions.length);
        document.getElementById('savingsSuggestions').textContent = suggestions[randomIndex];

        document.getElementById('result').classList.remove('hidden');
    }

    // Validar que el total de los porcentajes no exceda el 100%
    function validateTravelerPercentages() {
        const numPeople = parseInt(document.getElementById('numPeople').value) || 1;
        let totalTravelerPercentage = 0;

        for (let i = 1; i <= numPeople; i++) {
            totalTravelerPercentage += parseFloat(document.getElementById(`person${i}`).value) || 0;
        }

        const companyPercentage = parseFloat(document.getElementById('companyPercentage').value) || 0;
        const totalPercentage = totalTravelerPercentage + companyPercentage;

        if (totalPercentage > 100) {
            alert("The total percentage exceeds 100%. Please adjust the percentages.");
            return false;
        }
        return true;
    }

    // Función para limpiar todos los campos
    function clearFields() {
        document.getElementById('numPeople').value = 1;
        document.getElementById('numChildren').value = 0;
        document.getElementById('tripType').value = '';
        document.getElementById('numDays').value = 1;
        document.getElementById('flightCost').value = 0;
        document.getElementById('transportCost').value = 0;
        document.getElementById('accommodationCost').value = 0;
        document.getElementById('foodCost').value = 0;
        document.getElementById('extraCosts').value = 0;
        document.getElementById('companyPercentage').value = 0;
        document.getElementById('activitiesCost').value = 0;
        document.getElementById('percentageContainer').classList.add('hidden');
        document.getElementById('percentageContainer').innerHTML = '';
        document.getElementById('totalCost').textContent = '';
        document.getElementById('paymentDetails').innerHTML = '';
        document.getElementById('savingsSuggestions').textContent = '';
        document.getElementById('result').classList.add('hidden');
    }
})();