<!-- Simple Interval Schedule Editor -->
<!-- Used for 24/7 continuous monitoring with daily stop/download/restart cycles -->

<div id="schedule-interval-editor" class="space-y-4">
    <div class="mb-4">
        <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Continuous Monitoring (24/7)</h4>
        <p class="text-xs text-gray-500 dark:text-gray-400">
            For uninterrupted monitoring. The device will automatically stop, download data,
            and restart at the configured cycle time each day.
        </p>
    </div>

    <!-- Info box -->
    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
        <div class="flex gap-3">
            <svg class="w-5 h-5 text-blue-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
            </svg>
            <div class="text-sm text-blue-700 dark:text-blue-300">
                <p class="font-medium mb-1">How it works:</p>
                <ol class="list-decimal list-inside space-y-1 text-xs">
                    <li>At the cycle time, the measurement will <strong>stop</strong></li>
                    <li>If enabled, data will be <strong>downloaded</strong> via FTP</li>
                    <li>The measurement will <strong>restart</strong> automatically</li>
                </ol>
            </div>
        </div>
    </div>

    <!-- Cycle time -->
    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
            Daily Cycle Time
        </label>
        <div class="flex items-center gap-4">
            <input type="time"
                   name="cycle_time"
                   id="cycle_time"
                   value="{{ cycle_time or '00:00' }}"
                   class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-seismo-orange focus:border-seismo-orange">
            <span class="text-sm text-gray-500 dark:text-gray-400">
                Time when stop/download/restart cycle runs
            </span>
        </div>
        <p class="text-xs text-gray-400 dark:text-gray-500 mt-2">
            Recommended: midnight (00:00) to minimize disruption to data collection
        </p>
    </div>

    <!-- Download option -->
    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
        <label class="flex items-start gap-3 cursor-pointer">
            <input type="checkbox"
                   name="include_download"
                   id="include_download"
                   class="rounded text-seismo-orange focus:ring-seismo-orange mt-0.5"
                   {% if include_download is not defined or include_download %}checked{% endif %}>
            <div>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Download data before restart
                </span>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    When enabled, measurement data will be downloaded via FTP during the cycle.
                    Disable if you prefer to download manually or if FTP is not configured.
                </p>
            </div>
        </label>
    </div>

    <!-- Auto-increment index option -->
    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
        <label class="flex items-start gap-3 cursor-pointer">
            <input type="checkbox"
                   name="auto_increment_index"
                   id="auto_increment_index_interval"
                   class="rounded text-seismo-orange focus:ring-seismo-orange mt-0.5"
                   {% if auto_increment_index is not defined or auto_increment_index %}checked{% endif %}>
            <div>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
                    Auto-increment store index before restart
                </span>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    When enabled, the store/index number is incremented before starting a new measurement.
                    This prevents "overwrite existing data?" prompts on the device.
                </p>
            </div>
        </label>
    </div>

    <!-- Interval type (hidden for now, default to daily) -->
    <input type="hidden" name="interval_type" value="daily">

    <!-- Cycle preview -->
    <div class="bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4">
        <h5 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Cycle Sequence Preview</h5>
        <div class="flex items-center gap-2 text-sm">
            <div class="flex items-center gap-2">
                <span class="w-6 h-6 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center text-xs text-red-700 dark:text-red-300">1</span>
                <span class="text-gray-600 dark:text-gray-400">Stop</span>
            </div>
            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            <div class="flex items-center gap-2" id="download-step">
                <span class="w-6 h-6 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-xs text-blue-700 dark:text-blue-300">2</span>
                <span class="text-gray-600 dark:text-gray-400">Download</span>
            </div>
            <svg class="w-4 h-4 text-gray-400" id="download-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
            </svg>
            <div class="flex items-center gap-2">
                <span class="w-6 h-6 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center text-xs text-green-700 dark:text-green-300" id="start-step-num">3</span>
                <span class="text-gray-600 dark:text-gray-400">Start</span>
            </div>
        </div>
        <p class="text-xs text-gray-400 dark:text-gray-500 mt-3" id="cycle-timing">
            At <span id="preview-time">00:00</span>: Stop → Download → Start (~70 sec total)
        </p>
    </div>
</div>

<script>
// Update preview when download checkbox changes
document.getElementById('include_download').addEventListener('change', function() {
    const downloadStep = document.getElementById('download-step');
    const downloadArrow = document.getElementById('download-arrow');
    const startStepNum = document.getElementById('start-step-num');
    const cycleTiming = document.getElementById('cycle-timing');
    const timeValue = document.getElementById('cycle_time').value || '00:00';

    if (this.checked) {
        downloadStep.style.display = 'flex';
        downloadArrow.style.display = 'block';
        startStepNum.textContent = '3';
        cycleTiming.innerHTML = `At <span id="preview-time">${timeValue}</span>: Stop → Download → Start (~70 sec total)`;
    } else {
        downloadStep.style.display = 'none';
        downloadArrow.style.display = 'none';
        startStepNum.textContent = '2';
        cycleTiming.innerHTML = `At <span id="preview-time">${timeValue}</span>: Stop → Start (~40 sec total)`;
    }
});

// Update preview time when cycle time changes
document.getElementById('cycle_time').addEventListener('change', function() {
    document.getElementById('preview-time').textContent = this.value || '00:00';
});

// Function to get interval data as object
function getIntervalData() {
    return {
        interval_type: 'daily',
        cycle_time: document.getElementById('cycle_time').value,
        include_download: document.getElementById('include_download').checked,
        auto_increment_index: document.getElementById('auto_increment_index_interval').checked
    };
}
</script>
