{% extends '_base.html' %} {% block content %} <div class="container mx-auto w-full pt-14 pb-12 sm:pt-24 sm:pb-12 md:pt-28 lg:px-4" x-data="timer_settings"><div class="flex items-center justify-between"><h1 class="px-1 py-4 font-bold uppercase text-gray-600">{{locales.nav_settings}}</h1></div> {% include '_notification.html' %} <div class="mb-8 flex w-full leading-normal text-gray-800"><div class="grow"><div class="border bg-white shadow"><div class="border-b"><ul class="flex justify-between"> {% if stm32_firmware_exist %} <li class="basis-1/4 cursor-pointer border text-center hover:font-semibold"><a href="/device_control" class="block p-1 sm:p-3">{{locales.tab_device_control}}</a></li><li class="basis-1/4 cursor-pointer border text-center hover:font-semibold"><a href="/general_settings" class="block p-1 sm:p-3">{{locales.tab_general_settings}}</a></li><li class="basis-1/4 cursor-pointer border text-center hover:font-semibold"><a href="/settings" class="block p-1 sm:p-3">Wi-Fi</a></li><li class="basis-1/4 cursor-pointer border border-b-2 border-b-pcatblue text-center font-semibold hover:font-semibold"><a href="/timer" class="block p-1 sm:p-3">{{locales.tab_timers}}</a></li> {% else %} <li class="basis-1/3 cursor-pointer border text-center hover:font-semibold"><a href="/device_control" class="block p-1 sm:p-3">{{locales.tab_device_control}}</a></li><li class="basis-1/3 cursor-pointer border text-center hover:font-semibold"><a href="/general_settings" class="block p-1 sm:p-3">{{locales.tab_general_settings}}</a></li><li class="basis-1/3 cursor-pointer border border-b-2 border-b-pcatblue text-center font-semibold hover:font-semibold"><a href="/settings" class="block p-1 sm:p-3">Wi-Fi</a></li> {% endif %} </ul></div><div class="p-5"><div class="w-full"><div class="flex flex-col lg:flex-row gap-6"><div class="flex-1"><div class="mb-4 flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pcatblue" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg><h2 class="text-lg font-bold text-gray-700 uppercase tracking-wide">{{locales.power_policy_title}}</h2></div><div class="mb-4 flex flex-wrap gap-2"><label @click="mode_page = 'unknown_mode_page'" :class="mode_page === 'unknown_mode_page' ? 'bg-pcatblue text-white border-pcatblue shadow-lg' : 'bg-white border-gray-300 hover:border-pcatblue'" class="flex items-center space-x-2 rounded-lg border-2 px-4 py-2 cursor-pointer transition-all duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg><span class="font-medium">{{locales.manu_mode}}</span></label><label @click="mode_page = 'car_mode_page'" :class="mode_page === 'car_mode_page' ? 'bg-pcatblue text-white border-pcatblue shadow-lg' : 'bg-white border-gray-300 hover:border-pcatblue'" class="flex items-center space-x-2 rounded-lg border-2 px-4 py-2 cursor-pointer transition-all duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 17h14M5 17a2 2 0 01-2-2V9a2 2 0 012-2h1l1.5-3h9L18 7h1a2 2 0 012 2v6a2 2 0 01-2 2"/><circle cx="8" cy="18" r="2"/><circle cx="16" cy="18" r="2"/></svg><span class="font-medium">{{locales.car_mode}}</span></label><label @click="mode_page = 'timer_mode_page'" :class="mode_page === 'timer_mode_page' ? 'bg-pcatblue text-white border-pcatblue shadow-lg' : 'bg-white border-gray-300 hover:border-pcatblue'" class="flex items-center space-x-2 rounded-lg border-2 px-4 py-2 cursor-pointer transition-all duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg><span class="font-medium">{{locales.timer_mode}}</span></label><label @click="mode_page = 'force_power_mode_page'" :class="mode_page === 'force_power_mode_page' ? 'bg-pcatblue text-white border-pcatblue shadow-lg' : 'bg-white border-gray-300 hover:border-pcatblue'" class="flex items-center space-x-2 rounded-lg border-2 px-4 py-2 cursor-pointer transition-all duration-200"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v5m0 0l-2-2m2 2l2-2M7 12H5a2 2 0 00-2 2v1a2 2 0 002 2h14a2 2 0 002-2v-1a2 2 0 00-2-2h-2M9 21v-3h6v3"/></svg><span class="font-medium">{{locales.force_power_mode}}</span></label></div><div class="bg-white border-2 border-gray-200 rounded-xl shadow-sm p-5 min-h-[200px]"><div class="car_mode_page" x-cloak x-show="mode_page === 'car_mode_page'"><h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-pcatblue" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 17h14M5 17a2 2 0 01-2-2V9a2 2 0 012-2h1l1.5-3h9L18 7h1a2 2 0 012 2v6a2 2 0 01-2 2"/><circle cx="8" cy="18" r="2"/><circle cx="16" cy="18" r="2"/></svg> {{locales.car_mode}} </h3><div class="space-y-3"><div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-200"><label class="flex flex-wrap items-center gap-2 text-gray-700"><span>{{locales.when_power_supply_disconnected}}</span><input x-model="car_mode_timeout" type="number" class="w-24 text-center border-2 border-blue-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-pcatblue focus:border-transparent transition-all" min="0" value="0"><span>{{locales.after_minutes}}</span><span class="font-medium">{{locales.device_auto_power_off}}</span></label></div><div class="bg-blue-50 rounded-lg p-3 border-l-4 border-pcatblue"><p class="text-sm text-gray-700 leading-relaxed"> {{locales.car_mode_tip_1}} <br><br> {{locales.car_mode_tip_2}} </p></div></div></div><div class="timer_mode_page" x-cloak x-show="mode_page === 'timer_mode_page'"><h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-pcatblue" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> {{locales.timer_mode}} </h3><div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-200"><div class="flex flex-wrap items-center gap-3"><div class="flex items-center gap-2"><label class="flex items-center gap-1 cursor-pointer"><input type="radio" name="action_type" value="startup" x-model="action" class="text-blue-600 focus:ring-blue-500"><span class="text-sm font-medium">{{locales.power_on}}</span></label><label class="flex items-center gap-1 cursor-pointer"><input type="radio" name="action_type" value="shutdown" checked="" x-model="action" class="text-blue-600 focus:ring-blue-500"><span class="text-sm font-medium">{{locales.power_off}}</span></label></div><div class="h-6 w-px bg-gray-300"></div><div class="flex items-center gap-2" x-data="time_input"><span class="text-sm font-medium text-gray-700">{{locales.timer_time}}:</span><input type="text" class="w-20 text-center border-2 border-blue-300 rounded-lg px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500" maxlength="5" value="" x-model.debounce.500ms="time" @input="handle_type" @click="handle_click" x-on:wheel="handle_wheel"><div class="flex flex-col -space-y-1"><button type="button" @click="handle_add" class="hover:bg-blue-100 rounded px-1"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"></path></svg></button><button type="button" @click="handle_min" class="hover:bg-blue-100 rounded px-1"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-600" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></button></div></div><div class="h-6 w-px bg-gray-300"></div><div class="flex items-center gap-2 flex-wrap"><span class="text-sm font-medium text-gray-700">{{locales.timer_days}}:</span><label class="flex items-center gap-1 cursor-pointer hover:bg-blue-100 rounded px-2 py-1 transition-colors"><input type="checkbox" value="1" x-model="days" class="text-blue-600 focus:ring-blue-500 rounded"><span class="text-xs font-medium">{{locales.timer_mon}}</span></label><label class="flex items-center gap-1 cursor-pointer hover:bg-blue-100 rounded px-2 py-1 transition-colors"><input type="checkbox" value="2" x-model="days" class="text-blue-600 focus:ring-blue-500 rounded"><span class="text-xs font-medium">{{locales.timer_tue}}</span></label><label class="flex items-center gap-1 cursor-pointer hover:bg-blue-100 rounded px-2 py-1 transition-colors"><input type="checkbox" value="3" x-model="days" class="text-blue-600 focus:ring-blue-500 rounded"><span class="text-xs font-medium">{{locales.timer_wed}}</span></label><label class="flex items-center gap-1 cursor-pointer hover:bg-blue-100 rounded px-2 py-1 transition-colors"><input type="checkbox" value="4" x-model="days" class="text-blue-600 focus:ring-blue-500 rounded"><span class="text-xs font-medium">{{locales.timer_thu}}</span></label><label class="flex items-center gap-1 cursor-pointer hover:bg-blue-100 rounded px-2 py-1 transition-colors"><input type="checkbox" value="5" x-model="days" class="text-blue-600 focus:ring-blue-500 rounded"><span class="text-xs font-medium">{{locales.timer_fri}}</span></label><label class="flex items-center gap-1 cursor-pointer hover:bg-blue-100 rounded px-2 py-1 transition-colors"><input type="checkbox" value="6" x-model="days" class="text-blue-600 focus:ring-blue-500 rounded"><span class="text-xs font-medium">{{locales.timer_sat}}</span></label><label class="flex items-center gap-1 cursor-pointer hover:bg-blue-100 rounded px-2 py-1 transition-colors"><input type="checkbox" value="0" x-model="days" class="text-blue-600 focus:ring-blue-500 rounded"><span class="text-xs font-medium">{{locales.timer_sun}}</span></label></div><button type="button" class="ml-auto focus:ring-blue-300 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 focus:ring-2 shadow-sm hover:shadow-md transition-all" @click="add_timer"> {{locales.common_add}} </button></div></div><ul class="mt-3 border-t p-2"><template x-for="timer in timers" :key="timer.id"><li class="my-2 flex list-none items-center justify-between rounded border p-2 hover:border-gray-400"><div><span class="mr-2" x-text="timer.time"></span><span class="mr-2" x-text="timer.action == 'shutdown' ? '关机' : '开机' "></span><span class="mr-2" x-text="timer_days(timer.days)"></span></div><button class="ml-4 flex items-center rounded-md px-1 py-2 text-red-600 transition-colors duration-200 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-80" @click="remove_timer(timer.id)"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg></button></li></template></ul></div><div class="unknown_mode_page" x-cloak x-show="mode_page === 'unknown_mode_page'"><h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-pcatblue" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/></svg> {{locales.manu_mode}} </h3><div class="bg-gradient-to-r from-gray-50 to-slate-50 rounded-lg p-6 border-l-4 border-pcatgray"><p class="text-gray-700 leading-relaxed">{{locales.no_configuration_for_swtich_strategy}}</p></div></div><div class="force_power_mode_page" x-cloak x-show="mode_page === 'force_power_mode_page'"><h3 class="text-base font-semibold text-gray-800 mb-3 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-pcatblue" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v5m0 0l-2-2m2 2l2-2M7 12H5a2 2 0 00-2 2v1a2 2 0 002 2h14a2 2 0 002-2v-1a2 2 0 00-2-2h-2M9 21v-3h6v3"/></svg> {{locales.force_power_mode}} </h3><div class="bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg p-6 border-l-4 border-yellow-400"><p class="text-gray-700 leading-relaxed"> {{locales.force_power_mode_tip_1}} <br><br> {{locales.force_power_mode_tip_2}} </p> {% if mcu_version and mcu_version < "RA2E1260306000" %} <div class="mt-3 p-3 bg-red-50 border border-red-300 rounded-lg"><p class="text-sm text-red-700 font-medium">{{locales.force_power_mode_mcu_warning}}</p><p class="text-xs text-red-600 mt-1">{{locales.force_power_mode_mcu_current}}: {{mcu_version}}</p></div> {% endif %} </div></div></div></div><div class="flex-1 space-y-4"><div class="mb-4 flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg><h2 class="text-lg font-bold text-gray-700 uppercase tracking-wide">{{locales.shutdown_policy_title}}</h2></div><div class="bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl shadow-sm p-5"><div class="space-y-3"><label class="flex items-center space-x-3 cursor-pointer group"><input type="checkbox" x-model="idle_shutdown_enabled" class="form-checkbox h-5 w-5 text-green-600 rounded focus:ring-2 focus:ring-green-500 transition-all"><div class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.14 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0"/></svg><span class="font-semibold text-gray-800 group-hover:text-green-700 transition-colors">{{locales.idle_shutdown_enabled}}</span></div></label><div x-show="idle_shutdown_enabled" x-transition class="bg-white rounded-lg p-3 border border-green-200 space-y-2"><label class="flex items-center space-x-2 cursor-pointer"><input type="checkbox" x-model="idle_shutdown_battery_only" class="form-checkbox h-4 w-4 text-green-600 rounded focus:ring-2 focus:ring-green-500 transition-all"><span class="text-sm font-medium text-gray-700">{{locales.idle_shutdown_battery_only}}</span></label><div class="flex items-center space-x-2"><label class="text-sm font-medium text-gray-700">{{locales.idle_shutdown_timeout}}</label><input x-model="idle_shutdown_timeout" type="number" class="w-20 text-center border-2 border-green-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all" min="1" max="120" value="10"><span class="text-sm text-gray-600">{{locales.idle_shutdown_minutes}}</span></div></div><div x-show="idle_shutdown_enabled && idle_live_status !== 'unknown'" x-transition class="rounded-lg p-3 border-2" :class="idle_live_status === 'idle' ? 'bg-red-50 border-red-300' : 'bg-green-50 border-green-300'"><div class="flex items-center space-x-3"><div class="flex-shrink-0"><template x-if="idle_live_status === 'active'"><svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-green-500" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.111 16.404a5.5 5.5 0 017.778 0M12 20h.01m-7.08-7.071c3.904-3.905 10.236-3.905 14.14 0M1.394 9.393c5.857-5.858 15.355-5.858 21.213 0"/></svg></template><template x-if="idle_live_status === 'idle'"><svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-red-500 animate-pulse" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></template></div><div class="flex-1"><div class="text-sm font-medium" :class="idle_live_status === 'idle' ? 'text-red-700' : 'text-green-700'" x-text="idle_live_status === 'active' ? '{{locales.idle_status_active}} (' + idle_live_client_count + ')' : '{{locales.idle_status_idle}}'"></div><div x-show="idle_live_status === 'idle'" class="text-lg font-bold text-red-600 tabular-nums" x-text="'{{locales.idle_remaining_time}}: ' + idle_countdown_display"></div></div></div></div><p class="text-xs text-gray-500 leading-relaxed">{{locales.idle_shutdown_tip}}</p></div></div><div class="bg-gradient-to-br from-amber-50 to-orange-50 border-2 border-amber-200 rounded-xl shadow-sm p-5"><div class="space-y-3"><label class="flex items-center space-x-3 cursor-pointer group"><input type="checkbox" x-model="low_battery_shutdown_enabled" class="form-checkbox h-5 w-5 text-amber-600 rounded focus:ring-2 focus:ring-amber-500 transition-all"><div class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-600" fill="none" viewbox="0 0 24 24" stroke="currentColor"><rect x="2" y="8" width="16" height="8" rx="1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 11v2M5 11v2"/></svg><span class="font-semibold text-gray-800 group-hover:text-amber-700 transition-colors">{{locales.low_battery_shutdown_enabled}}</span></div></label><div x-show="low_battery_shutdown_enabled" x-transition class="bg-white rounded-lg p-3 border border-amber-200"><div class="flex items-center space-x-2"><label class="text-sm font-medium text-gray-700">{{locales.low_battery_threshold}}</label><input x-model="low_battery_threshold" type="number" class="w-20 text-center border-2 border-amber-300 rounded-lg px-2 py-1.5 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:border-transparent transition-all" min="5" max="95" value="20"><span class="text-sm text-gray-600">{{locales.low_battery_percent}}</span></div></div><p class="text-xs text-gray-500 leading-relaxed">{{locales.low_battery_tip}}</p></div></div></div></div><div class="mt-6 flex justify-center"><button type="button" class="focus:ring-blue-300 rounded-lg bg-pcatblue px-8 py-3 text-base font-semibold text-white hover:bg-blue-600 focus:ring-4 shadow-lg hover:shadow-xl transition-all transform hover:scale-105" @click="save_all_settings" x-text="saving_all ? '{{locales.common_save}} ...' : '{{locales.common_save}}'"></button></div><div class="mt-8 border-t-2 border-gray-200 pt-6"><div class="flex items-center justify-between mb-4 cursor-pointer" @click="event_log_open = !event_log_open"><div class="flex items-center space-x-2"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg><h3 class="text-sm font-bold text-gray-600 uppercase tracking-wide">{{locales.power_event_log_title}}</h3><span class="text-xs text-gray-400" x-show="event_log_total > 0" x-text="'(' + event_log_total + ')'"></span></div><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400 transition-transform" :class="event_log_open ? 'rotate-180' : ''" fill="none" viewbox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg></div><div x-show="event_log_open" x-transition><p class="text-xs text-gray-400 mb-3">{{locales.power_event_log_tip}}</p><div class="flex justify-end mb-2" x-show="event_log_events.length > 0"><button type="button" class="text-xs text-red-500 hover:text-red-700 hover:underline" @click="clearEventLog()">{{locales.power_event_clear}}</button></div><div x-show="event_log_events.length === 0" class="text-center text-sm text-gray-400 py-6"> {{locales.power_event_no_events}} </div><div x-show="event_log_events.length > 0" class="space-y-0 max-h-80 overflow-y-auto"><template x-for="ev in event_log_events" :key="ev.id || ev.ts"><div class="flex items-center py-1.5 px-2 rounded text-xs hover:bg-gray-50 border-b border-gray-100 whitespace-nowrap overflow-hidden"><span class="flex-shrink-0 text-gray-300 font-mono w-6 mr-1 text-right" x-text="ev.id || '-'"></span><span class="flex-shrink-0 w-2 h-2 rounded-full mr-2" :class="eventDotClass(ev.type)"></span><span class="flex-shrink-0 font-medium mr-2" :class="eventTextClass(ev.type)" x-text="eventTypeLabel(ev.type)"></span><span class="text-gray-500 truncate min-w-0" x-text="ev.detail"></span><span class="flex-shrink-0 ml-2 text-gray-300 font-mono" x-show="ev.bat && ev.bat.v != null" x-text="ev.bat ? (ev.bat.soc + '% ' + ev.bat.v + 'V ' + (ev.bat.v * ev.bat.mA / 1000).toFixed(2) + 'W') : ''"></span><span class="flex-shrink-0 ml-auto pl-3 text-gray-400 font-mono text-right" x-text="eventTimeAgo(ev.ts) + ' · ' + ev.time.substring(5)"></span></div></template></div><div class="flex justify-center mt-3" x-show="event_log_total > event_log_events.length"><button type="button" class="text-xs text-pcatblue hover:underline" @click="loadMoreEvents()">Load more...</button></div></div></div></div></div></div></div></div></div> {% endblock %} {% block bottom %} <script>
  function padLeadingZeros(num, size) {
    var s = num + "";
    while (s.length < size) s = "0" + s;
    return s;
  }

  document.addEventListener("alpine:init", () => {
    Alpine.store("app").set_page("settings");

    Alpine.data("time_input", () => ({
      init() {
        this.display_time();
        this.$watch("hour", (value) => {
          if (value > 23) {
            this.hour = 0;
          } else if (value < 0) {
            this.hour = 23;
          }
          this.display_time();
        });
        this.$watch("minute", (value) => {
          console.log("Detect minute changed");
          if (value > 59) {
            this.minute = 0;
          } else if (value < 0) {
            this.minute = 59;
          }
          this.display_time();
        });
      },
      display_time() {
        // time in parent x-data;
        this.time = padLeadingZeros(this.hour, 2) + ":" + padLeadingZeros(this.minute, 2);
      },
      hour: 0,
      minute: 0,
      type_position: 0,
      type_timer: undefined,
      handle_click(e) {
        this.type_position = e.target.selectionStart;
        console.log("type posion", this.type_position);
      },
      handle_type(e) {
        console.log(e.target.value);
        if (this.type_timer) {
          console.log("clear old timer");
          clearTimeout(this.type_timer);
        }
        this.type_timer = setTimeout(() => {
          console.log("timer work.");
          let text = this.time.split(":");
          if (text.length != 2) {
            this.display_time();
          } else {
            let h = parseInt(text[0]);
            let m = parseInt(text[1]);
            let invalid = false;
            if (h < 0 || h >= 24 || isNaN(h)) {
              console.log("Invalid hour");
              h = this.hour;
              invalid = true;
            }
            if (m < 0 || m >= 60 || isNaN(m)) {
              console.log("Invalid minute", this.minute);
              m = this.minute;
              invalid = true;
            }
            if (invalid) {
              this.display_time();
            } else {
              // watch will work to display time;
              this.hour = h;
              this.minute = m;
            }
          }
          this.type_timer = undefined;
        }, 2000);
      },
      handle_wheel(e) {
        console.log("type position", this.type_position, e.deltaY);
        if (e.deltaY < 0) {
          this.handle_add();
        } else {
          this.handle_min();
        }
      },
      handle_add() {
        if (this.type_position < 3) {
          this.hour++;
        } else {
          this.minute++;
        }
      },
      handle_min() {
        if (this.type_position < 3) {
          this.hour--;
        } else {
          this.minute--;
        }
      },
    }));

    Alpine.data("timer_settings", () => ({
      init() {
        fetch("/api/v1/timers.json")
          .then((response) => response.json())
          .then((data) => {
            this.timers = data.events;
          });

        // Load idle shutdown settings
        fetch("/api/v1/idle_shutdown.json")
          .then((response) => response.json())
          .then((data) => {
            this.idle_shutdown_enabled = data.enabled || false;
            this.idle_shutdown_timeout = data.timeout || 10;
            this.idle_shutdown_battery_only = data.battery_only || false;
          })
          .catch(() => {
            this.idle_shutdown_enabled = false;
            this.idle_shutdown_timeout = 10;
            this.idle_shutdown_battery_only = false;
          });

        // Start idle countdown polling
        this._startIdlePolling();

        // Load power event log
        this._fetchEventLog();

        // Load low battery shutdown settings
        fetch("/api/v1/low_battery_shutdown.json")
          .then((response) => response.json())
          .then((data) => {
            this.low_battery_shutdown_enabled = data.enabled || false;
            this.low_battery_threshold = data.threshold || 20;
          })
          .catch(() => {
            this.low_battery_shutdown_enabled = false;
            this.low_battery_threshold = 20;
          });

        // Charge limit moved to Device Control (/device_control); not loaded here.

        Alpine.effect(() => {
          console.log("!!!! Detect car mode changed", Alpine.store("app").car_mode.enabled);
          this.car_mode_enabled = Alpine.store("app").car_mode.enabled;
          this.car_mode_timeout = Alpine.store("app").car_mode.timeout;
        });
      },

      // Notification system
      notification: {
        show: false,
        message: '',
        message_en: '',
        message_cn: '',
        type: 'info' // 'success', 'error', 'info'
      },
      mode_page: "{{mode_page}}",
      car_mode_enabled: "false",
      car_mode_timeout: 0, // unit: minutes
      saving_car_mode: false,
      saving_force_mode: false,

      // Idle shutdown settings
      idle_shutdown_enabled: false,
      idle_shutdown_timeout: 10, // unit: minutes
      idle_shutdown_battery_only: false,
      saving_idle: false,
      saving_all: false,

      // Live idle shutdown countdown
      idle_live_status: "unknown", // from server: "active", "idle", "disabled", "unknown"
      idle_live_remaining_seconds: 0,
      idle_live_client_count: 0,
      idle_countdown_display: "",
      _idle_poll_timer: null,
      _idle_tick_timer: null,

      // Low battery shutdown settings
      low_battery_shutdown_enabled: false,
      low_battery_threshold: 20, // unit: percent
      saving_low_battery: false,

      // Battery charge limit
      charge_threshold: null,

      // Power event log
      event_log_open: false,
      event_log_events: [],
      event_log_total: 0,
      event_log_limit: 50,

      action: "startup",
      time: "00:00",
      days: [], // eg: [0, 1, 2, 3, 4, 5, 6] 0 weekend
      timers: [],
      saving_timers: false,
      save_manu_mode() {
        this.saving_car_mode = true;
        const form_data = {
          carmode: 'false',
          timeout: 0,
        };

        fetch("/api/v1/carbootmode.json", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify(form_data),
        })
          .then((response) => response.json())
          .then((data) => {
            setTimeout(() => {
              this.saving_car_mode = false;
              if (data.status == "ok") {
                this.showNotification("{{locales.save_action_success_and_reboot}}", "保存成功，设备将重启", 'success');
              } else {
                this.showNotification("{{locales.save_action_failed}}", "保存失败", 'error');
              }
            }, 1000);

            setTimeout(() => {
              this.reboot_reason = '{{locales.reboot_reason_power_settings}}';
              this.reboot_dlg_open = true;
            }, 3000);
          });
      },
      save_carmode() {
        if (this.car_mode_timeout > 600) {
          this.car_mode_timeout = 600;
          this.showNotification("{{locales.car_timeout_invalid}}", "车载模式超时无效", 'error');
          return;
        }
        this.saving_car_mode = true;
        this.car_mode_enabled = "true";
        const form_data = {
          carmode: this.car_mode_enabled,
          timeout: this.car_mode_timeout * 60,
        };

        fetch("/api/v1/carbootmode.json", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify(form_data),
        })
          .then((response) => response.json())
          .then((data) => {
            setTimeout(() => {
              this.saving_car_mode = false;
              if (data.status == "ok") {
                this.showNotification("{{locales.save_action_success_carmode_tip}}", "车载模式保存成功", 'success');
              } else {
                this.showNotification("{{locales.save_action_failed}}", "保存失败", 'error');
              }
            }, 1000);
          });
      },

      save_force_power_mode() {
        this.saving_force_mode = true;
        const form_data = {
          forcemode: 'true',
        };

        fetch("/api/v1/forcepowermode.json", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify(form_data),
        })
          .then((response) => response.json())
          .then((data) => {
            setTimeout(() => {
              this.saving_force_mode = false;
              if (data.status == "ok") {
                this.showNotification("{{locales.save_action_success_carmode_tip}}", "直连电源模式保存成功", 'success');
              } else {
                this.showNotification("{{locales.save_action_failed}}", "保存失败", 'error');
              }
            }, 1000);
          });
      },

      save_idle_settings() {
        if (this.idle_shutdown_enabled && (this.idle_shutdown_timeout < 1 || this.idle_shutdown_timeout > 120)) {
          this.showNotification("Timeout must be between 1 and 120 minutes", "超时时间必须在1-120分钟之间", 'error');
          return;
        }

        this.saving_idle = true;
        const form_data = {
          enabled: this.idle_shutdown_enabled,
          timeout: this.idle_shutdown_timeout,
          battery_only: this.idle_shutdown_battery_only,
        };

        fetch("/api/v1/idle_shutdown.json", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify(form_data),
        })
          .then((response) => response.json())
          .then((data) => {
            setTimeout(() => {
              this.saving_idle = false;
              if (data.status == "ok") {
                this.showNotification("{{locales.save_action_success}}", "空闲自动关机设置保存成功", 'success');
              } else {
                this.showNotification("{{locales.save_action_failed}}", "保存失败", 'error');
              }
            }, 1000);
          });
      },

      save_low_battery_settings() {
        if (this.low_battery_shutdown_enabled && (this.low_battery_threshold < 5 || this.low_battery_threshold > 95)) {
          this.showNotification("Threshold must be between 5% and 95%", "阈值必须在5%-95%之间", 'error');
          return;
        }

        this.saving_low_battery = true;
        const form_data = {
          enabled: this.low_battery_shutdown_enabled,
          threshold: this.low_battery_threshold,
        };

        fetch("/api/v1/low_battery_shutdown.json", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify(form_data),
        })
          .then((response) => response.json())
          .then((data) => {
            setTimeout(() => {
              this.saving_low_battery = false;
              if (data.status == "ok") {
                this.showNotification("{{locales.save_action_success}}", "低电量自动关机设置保存成功", 'success');
              } else {
                this.showNotification("{{locales.save_action_failed}}", "保存失败", 'error');
              }
            }, 1000);
          });
      },

      _startIdlePolling() {
        // Poll server every 5 seconds for idle status
        this._fetchIdleStatus();
        this._idle_poll_timer = setInterval(() => {
          this._fetchIdleStatus();
        }, 5000);
        // Tick every second for smooth countdown
        this._idle_tick_timer = setInterval(() => {
          if (this.idle_live_status === 'idle' && this.idle_live_remaining_seconds > 0) {
            this.idle_live_remaining_seconds = Math.max(0, this.idle_live_remaining_seconds - 1);
            this._updateCountdownDisplay();
          }
        }, 1000);
      },

      _fetchIdleStatus() {
        fetch("/api/v1/dashboard.json")
          .then((r) => r.json())
          .then((data) => {
            let serverStatus = data.idle_status || "unknown";
            let clientCount = data.wifi_clients_count || 0;
            // Use client count to correct status when server state is stale
            if (clientCount > 0 && serverStatus === 'idle') {
              serverStatus = 'active';
            }
            this.idle_live_status = serverStatus;
            this.idle_live_remaining_seconds = data.idle_remaining_seconds || 0;
            this.idle_live_client_count = clientCount;
            this._updateCountdownDisplay();
          })
          .catch(() => {});
      },

      _updateCountdownDisplay() {
        let total = this.idle_live_remaining_seconds;
        let mins = Math.floor(total / 60);
        let secs = total % 60;
        this.idle_countdown_display = String(mins).padStart(2, '0') + ':' + String(secs).padStart(2, '0');
      },

      timer_days(days) {
        return days
          .map((d_i) => {
            let d_in = parseInt(d_i);
            return ["{{locales.timer_sun}}", "{{locales.timer_mon}}", "{{locales.timer_tue}}", "{{locales.timer_wed}}", "{{locales.timer_thu}}", "{{locales.timer_fri}}", "{{locales.timer_sat}}"][d_in];
          })
          .join(", ");
      },

      add_timer() {
        if (this.days.length === 0) {
          this.showNotification("{{locales.please_select_days}}", "请选择天数", 'error');
          return;
        }
        if (this.timers.length >= 6) {
          this.showNotification("{{locales.no_more_timers_support}}", "不支持更多计时器", 'error');
          return;
        }
        let form_data = {
          id: Date.now(),
          time: this.time,
          action: this.action,
          days: this.days,
        };
        for (let i = 0; i < this.timers.length; i++) {
          let t = this.timers[i];
          if (t.time === form_data.time && t.action === form_data.action && t.days === form_data.days) {
            this.showNotification("{{locales.same_timer_exist}}", "相同的计时器已存在", 'error');
            return;
          }
        }
        let updatedList = [...this.timers, form_data];
        this.timers = updatedList;
      },

      remove_timer(timer_id) {
        let filteredArray = this.timers.filter((item) => item.id !== timer_id);
        this.timers = filteredArray;
        //console.log("new timers", this.timers);
      },

      save_timers() {
        this.saving_timers = true;
        fetch("/api/v1/timers.json", {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          body: JSON.stringify(this.timers),
        })
          .then((response) => response.json())
          .then((data) => {
            setTimeout(() => {
              this.saving_timers = false;
              if (data.status == "ok") {
                this.showNotification("{{locales.save_action_success}}", "保存成功", 'success');
              } else {
                this.showNotification("{{locales.save_action_failed}}", "保存失败", 'error');
              }
            }, 1000);
          });
      },

      // Notification system functions
      showNotification(message_en, message_cn = '', type = 'info') {
        this.notification.message_en = message_en;
        this.notification.message_cn = message_cn;
        this.notification.message = message_en; // Fallback
        this.notification.type = type;
        this.notification.show = true;
        
        // Auto-hide after 4 seconds for success and info messages
        if (type !== 'error') {
          setTimeout(() => {
            this.notification.show = false;
          }, 4000);
        }
      },

      hideNotification() {
        this.notification.show = false;
      },

      _fetchEventLog() {
        fetch("/api/v1/power_events.json?limit=" + this.event_log_limit)
          .then((r) => r.json())
          .then((data) => {
            this.event_log_events = data.events || [];
            this.event_log_total = data.total || 0;
          })
          .catch(() => {});
      },

      loadMoreEvents() {
        this.event_log_limit += 50;
        this._fetchEventLog();
      },

      clearEventLog() {
        if (!confirm("{{locales.power_event_clear_confirm}}")) return;
        fetch("/api/v1/power_events.json", { method: "DELETE" })
          .then((r) => r.json())
          .then(() => {
            this.event_log_events = [];
            this.event_log_total = 0;
          })
          .catch(() => {});
      },

      eventTypeLabel(type) {
        const labels = {
          'system_start': "{{locales.power_event_type_system_start}}",
          'system_shutdown': "{{locales.power_event_type_system_shutdown}}",
          'idle_shutdown_triggered': "{{locales.power_event_type_idle_shutdown_triggered}}",
          'idle_countdown_started': "{{locales.power_event_type_idle_countdown_started}}",
          'idle_countdown_reset': "{{locales.power_event_type_idle_countdown_reset}}",
          'low_battery_shutdown_triggered': "{{locales.power_event_type_low_battery_shutdown_triggered}}",
          'power_mode_changed': "{{locales.power_event_type_power_mode_changed}}",
          'settings_changed': "{{locales.power_event_type_settings_changed}}",
          'power_dip': "{{locales.power_event_type_power_dip}}",
          'dc_plugged_in': "{{locales.power_event_type_dc_plugged_in}}",
          'dc_unplugged': "{{locales.power_event_type_dc_unplugged}}",
        };
        return labels[type] || type;
      },

      eventDotClass(type) {
        if (type === 'system_start') return 'bg-green-500';
        if (type === 'system_shutdown' || type === 'idle_shutdown_triggered' || type === 'low_battery_shutdown_triggered') return 'bg-red-500';
        if (type === 'idle_countdown_started') return 'bg-yellow-500';
        if (type === 'idle_countdown_reset') return 'bg-green-400';
        if (type === 'power_dip') return 'bg-orange-500';
        if (type === 'dc_plugged_in') return 'bg-cyan-500';
        if (type === 'dc_unplugged') return 'bg-cyan-700';
        if (type === 'power_mode_changed') return 'bg-blue-500';
        if (type === 'settings_changed') return 'bg-gray-400';
        return 'bg-gray-300';
      },

      eventTextClass(type) {
        if (type === 'system_start') return 'text-green-700';
        if (type === 'system_shutdown' || type === 'idle_shutdown_triggered' || type === 'low_battery_shutdown_triggered') return 'text-red-700';
        if (type === 'idle_countdown_started') return 'text-yellow-700';
        if (type === 'idle_countdown_reset') return 'text-green-600';
        if (type === 'power_dip') return 'text-orange-700';
        if (type === 'dc_plugged_in') return 'text-cyan-600';
        if (type === 'dc_unplugged') return 'text-cyan-800';
        if (type === 'power_mode_changed') return 'text-blue-700';
        if (type === 'settings_changed') return 'text-gray-600';
        return 'text-gray-500';
      },

      eventTimeAgo(ts) {
        let diff = Math.floor(Date.now() / 1000) - ts;
        if (diff < 60) return diff + 's ago';
        if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
        if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
        return Math.floor(diff / 86400) + 'd ago';
      },

      async save_all_settings() {
        // Validate all settings upfront before saving anything
        if (this.idle_shutdown_enabled && (this.idle_shutdown_timeout < 1 || this.idle_shutdown_timeout > 120)) {
          this.showNotification("Timeout must be between 1 and 120 minutes", "超时时间必须在1-120分钟之间", 'error');
          return;
        }
        if (this.low_battery_shutdown_enabled && (this.low_battery_threshold < 5 || this.low_battery_threshold > 95)) {
          this.showNotification("Threshold must be between 5% and 95%", "阈值必须在5%-95%之间", 'error');
          return;
        }
        if (this.mode_page === 'car_mode_page' && this.car_mode_timeout > 600) {
          this.car_mode_timeout = 600;
          this.showNotification("{{locales.car_timeout_invalid}}", "车载模式超时无效", 'error');
          return;
        }

        this.saving_all = true;

        // Save idle and low battery settings FIRST (before power mode change
        // which may trigger immediate shutdown, e.g. force power mode without charger)
        try {
          await Promise.all([
            fetch("/api/v1/idle_shutdown.json", {
              method: "POST",
              headers: { Accept: "application/json", "Content-Type": "application/json" },
              body: JSON.stringify({ enabled: this.idle_shutdown_enabled, timeout: this.idle_shutdown_timeout, battery_only: this.idle_shutdown_battery_only }),
            }),
            fetch("/api/v1/low_battery_shutdown.json", {
              method: "POST",
              headers: { Accept: "application/json", "Content-Type": "application/json" },
              body: JSON.stringify({ enabled: this.low_battery_shutdown_enabled, threshold: this.low_battery_threshold }),
            }),
            // Charge limit is set on Device Control (/device_control) now; the
            // Timer page no longer writes it, to avoid overwriting that value.
          ]);
        } catch (e) {
          console.error("Failed to save shutdown settings:", e);
        }

        // Now save power mode (may trigger shutdown/reboot)
        let needs_reboot = false;
        if (this.mode_page === 'car_mode_page') {
          this.save_carmode();
          needs_reboot = true;
        } else if (this.mode_page === 'timer_mode_page') {
          this.save_timers();
          needs_reboot = true;
        } else if (this.mode_page === 'unknown_mode_page') {
          this.save_manu_mode();
        } else if (this.mode_page === 'force_power_mode_page') {
          this.save_force_power_mode();
          needs_reboot = true;
        }

        setTimeout(() => {
          this.saving_all = false;
          if (needs_reboot) {
            this.reboot_reason = '{{locales.reboot_reason_power_settings}}';
            this.reboot_dlg_open = true;
          }
        }, 2000);
      },
    }));
  });
</script> {% endblock %}