<style>
    .time-picker-container {
        position: relative;
        display: inline-block;
    }

    .time-display {
        border: 1px solid #ccc;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        background: #fff;
        text-align: center;
        width: 100px;
        font-size: 16px;
    }

    .time-picker {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 8px;
        display: flex;
        gap: 8px;
    }

    .hidden {
        display: none;
    }

    .time-column {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .arrow {
        background: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
    }

    .hour-input,
    .minute-input {
        width: 40px;
        text-align: center;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px;
        font-size: 16px;
        background: white;
    }

    .separator {
        font-size: 20px;
    }
</style>

<div class="time-picker-container">
    <!-- Campo de entrada -->
     <div>
        Hora / Minutos
     </div>
    <div class="time-display" onclick="toggleTimePicker(this)">
        <span class="selected-hour">{{ str_pad($selectedHour, 2, '0', STR_PAD_LEFT) }}</span>:
        <span class="selected-minute">{{ str_pad($selectedMinute, 2, '0', STR_PAD_LEFT) }}</span>
    </div>

    <!-- Selector de Hora y Minuto -->
    <div class="time-picker hidden">
        <!-- Horas -->
        <div class="time-column">
            <button class="arrow up" onclick="changeTime(this, 'hour', 1)">▲</button>
            <input type="text" name="{{ $name }}_hour" class="hour-input"
                value="{{ str_pad($selectedHour, 2, '0', STR_PAD_LEFT) }}" readonly>
            <button class="arrow down" onclick="changeTime(this, 'hour', -1)">▼</button>
        </div>

        <span class="separator">:</span>

        <!-- Minutos -->
        <div class="time-column">
            <button class="arrow up" onclick="changeTime(this, 'minute', 1)">▲</button>
            <input type="text" name="{{ $name }}_minute" class="minute-input"
                value="{{ str_pad($selectedMinute, 2, '0', STR_PAD_LEFT) }}" readonly>
            <button class="arrow down" onclick="changeTime(this, 'minute', -1)">▼</button>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.addEventListener("click", function(event) {
            const openPickers = document.querySelectorAll(".time-picker:not(.hidden)");
            openPickers.forEach(picker => {
                if (!picker.parentNode.contains(event.target)) {
                    picker.classList.add("hidden");
                }
            });
        });
    });

    function toggleTimePicker(element) {
        let picker = element.nextElementSibling;
        picker.classList.toggle("hidden");
    }

    function changeTime(button, type, change) {
        let inputField = button.parentElement.querySelector(type === "hour" ? ".hour-input" : ".minute-input");
        let displayField = button.closest(".time-picker-container").querySelector(type === "hour" ? ".selected-hour" : ".selected-minute");

        let min = type === "hour" ? 0 : 0;
        let max = type === "hour" ? 23 : 59;

        let value = parseInt(inputField.value);
        value += change;

        if (value > max) value = min;
        if (value < min) value = max;

        let formattedValue = value.toString().padStart(2, "0");
        inputField.value = formattedValue;
        displayField.textContent = formattedValue;
    }
</script>