@extends('adminlte::page')

@section('title', 'Cron Schedule')

@section('content_header')
@stop

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header with-border" style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color:#fff; border-radius:4px 4px 0 0;">
                <h3 class="box-title" style="color:#fff;"><i class="fa fa-clock-o"></i> &nbsp;Cron Schedule &mdash; Auto Event Scheduler</h3>
                <div class="box-tools pull-right" style="display:flex; align-items:center; gap:8px;">
                    <span class="label label-default" style="font-size:12px; background:#0f3460; padding:5px 10px;">
                        <i class="fa fa-map-marker"></i> America/Los_Angeles &nbsp;|&nbsp;
                        <strong id="la-clock">{{ $nowLa->format('D, d M Y H:i:s') }}</strong>
                    </span>
                    <a href="{{ route('events.index') }}" class="btn btn-default btn-xs">
                        <i class="fa fa-list"></i> Event List
                    </a>
                </div>
            </div>
            <div class="box-body" style="background:#f8f9fa;">

                {{-- Two cron info cards --}}
                <div class="row" style="margin-bottom:16px;">
                    <div class="col-md-6">
                        <div class="info-box" style="background:#fff; border-left:5px solid #3c8dbc; box-shadow:0 1px 4px rgba(0,0,0,.12);">
                            <span class="info-box-icon" style="background:#3c8dbc; font-size:20px; line-height:70px;"><i class="fa fa-calendar-check-o"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text" style="font-size:13px; font-weight:600;">events:schedule &nbsp;<small class="text-muted">(dailyAt 04:50 LA)</small></span>
                                <span class="info-box-number" style="font-size:20px;" id="schedule-countdown">
                                    @if($diffH > 0)
                                        <span style="color:#3c8dbc;">{{ $diffH }}h {{ $diffM }}m</span>
                                    @else
                                        <span style="color:#f39c12;">{{ $diffM }}m</span>
                                    @endif
                                </span>
                                <div class="progress" style="margin:4px 0 0; height:6px;">
                                    @php $pct = 100 - round(($diffSec / 86400) * 100); @endphp
                                    <div class="progress-bar progress-bar-striped active" style="width:{{ $pct }}%; background:#3c8dbc;"></div>
                                </div>
                                <span class="progress-description" style="font-size:11px;">Next run: <strong>{{ $nextRun->format('D d M, H:i') }} LA</strong></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-box" style="background:#fff; border-left:5px solid #00a65a; box-shadow:0 1px 4px rgba(0,0,0,.12);">
                            <span class="info-box-icon" style="background:#00a65a; font-size:20px; line-height:70px;"><i class="fa fa-calculator"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text" style="font-size:13px; font-weight:600;">calculate_total_point &nbsp;<small class="text-muted">(every :00 &amp; :30)</small></span>
                                <span class="info-box-number" style="font-size:20px; color:#00a65a;" id="cron-countdown">{{ $cronDiffM2 }}m {{ $cronDiffSec % 60 }}s</span>
                                <div class="progress" style="margin:4px 0 0; height:6px;">
                                    @php $pct2 = 100 - round(($cronDiffSec / 1800) * 100); @endphp
                                    <div class="progress-bar progress-bar-striped active" style="width:{{ $pct2 }}%; background:#00a65a;"></div>
                                </div>
                                <span class="progress-description" style="font-size:11px;">Next run: <strong>{{ $nextCronLa->format('H:i') }} LA</strong></span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Weekly Schedule --}}
                <div class="row">
                    <div class="col-md-8">
                        <h5 style="font-weight:700; margin-bottom:8px;"><i class="fa fa-refresh text-blue"></i> Weekly Auto-Schedule</h5>
                        <table class="table table-bordered table-condensed" style="background:#fff; font-size:12px;">
                            <thead style="background:#ecf0f1;">
                                <tr>
                                    <th style="width:110px;">Day</th>
                                    <th>Events Scheduled</th>
                                    <th style="width:80px;">Duration</th>
                                    <th style="width:70px;">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($weeklySchedule as $dow => $cfg)
                                    @php
                                        $isToday = ($dow == $todayDow);
                                        $daysUntil = ($dow - $todayDow + 7) % 7;
                                        if ($daysUntil == 0 && $nowLa->format('H:i') >= '04:50') $daysUntil = 7;
                                    @endphp
                                    <tr style="{{ $isToday ? 'background:#eaf4fb;' : '' }}">
                                        <td>
                                            <strong class="text-{{ $cfg['color'] }}">{{ $cfg['day'] }}</strong>
                                            @if($isToday)
                                                <span class="label label-{{ $cfg['color'] }}" style="font-size:10px;">Today</span>
                                            @elseif($daysUntil == 0)
                                                <span class="label label-success" style="font-size:10px;">Today</span>
                                            @else
                                                <span class="text-muted" style="font-size:10px;">in {{ $daysUntil }}d</span>
                                            @endif
                                        </td>
                                        <td>
                                            @foreach($cfg['events'] as $ev)
                                                <span class="label label-{{ $cfg['color'] }}" style="margin:1px 2px; display:inline-block;">{{ $ev }}</span>
                                            @endforeach
                                        </td>
                                        <td class="text-center text-muted">{{ $cfg['duration'] }}</td>
                                        <td class="text-center">
                                            @if($daysUntil == 0 && $nowLa->format('H:i') < '04:50')
                                                <i class="fa fa-hourglass-half text-orange" title="Runs soon"></i>
                                            @elseif($isToday && $nowLa->format('H:i') >= '04:50')
                                                <i class="fa fa-check-circle text-green" title="Ran today"></i>
                                            @else
                                                <i class="fa fa-clock-o text-muted"></i>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                        {{-- Full week view --}}
                        <h5 style="font-weight:700; margin:16px 0 8px;"><i class="fa fa-calendar-o text-blue"></i> Full Week Overview</h5>
                        <div style="display:flex; gap:4px;">
                            @php
                                $allDays = [
                                    1 => 'Mon', 2 => 'Tue', 3 => 'Wed',
                                    4 => 'Thu', 5 => 'Fri', 6 => 'Sat', 7 => 'Sun'
                                ];
                            @endphp
                            @foreach($allDays as $d => $dName)
                                @php
                                    $hasCron = isset($weeklySchedule[$d]);
                                    $isToday = ($d == $todayDow);
                                    $col = $hasCron ? $weeklySchedule[$d]['color'] : 'default';
                                    $bg = $isToday ? '#f39c12' : ($hasCron ? '' : '#ecf0f1');
                                    $textCol = $isToday ? '#fff' : ($hasCron ? '' : '#aaa');
                                @endphp
                                <div style="flex:1; text-align:center; border-radius:6px; padding:8px 4px;
                                    background:{{ $bg }}; border:2px solid {{ $isToday ? '#f39c12' : ($hasCron ? '#3c8dbc' : '#ddd') }};">
                                    <div style="font-weight:700; font-size:12px; color:{{ $textCol }};">{{ $dName }}</div>
                                    @if($hasCron)
                                        <div style="margin-top:4px;">
                                            @foreach($weeklySchedule[$d]['events'] as $ev)
                                                <div style="font-size:9px; background:rgba(0,0,0,.12); border-radius:3px; padding:1px 3px; margin:1px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; font-weight:600;">
                                                    {{ str_replace('EVENT_', '', $ev) }}
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div style="font-size:10px; color:#bbb; margin-top:4px;">—</div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="col-md-4">
                        <h5 style="font-weight:700; margin-bottom:8px;"><i class="fa fa-calendar text-orange"></i> Monthly Triggers</h5>
                        <div style="background:#fff; border:1px solid #ddd; border-radius:4px; padding:10px; font-size:12px; margin-bottom:12px;">
                            <div style="margin-bottom:6px;">
                                <strong>Trigger days:</strong>
                                @foreach($monthlyTriggers as $d)
                                    <span class="label {{ $d == $todayDom ? 'label-warning' : 'label-default' }}">{{ $d }}</span>
                                @endforeach
                                &nbsp;of each month
                            </div>
                            <div style="margin-bottom:6px;">
                                @foreach($monthlyEvents as $ev)
                                    <span class="label label-warning" style="margin:1px 2px; display:inline-block; font-size:10px;">{{ $ev }}</span>
                                @endforeach
                            </div>
                            @if($todayDom == 12)
                                <div style="margin-top:6px; padding:4px 8px; background:#fef9e7; border-left:3px solid #f39c12; font-size:11px;">
                                    <i class="fa fa-star text-orange"></i> <strong>Today (12th):</strong> EVENT_TOP_HOL_GUILD scheduled (13th–23rd)
                                </div>
                            @endif
                            <div style="margin-top:8px; color:#888; font-size:11px;">
                                @if($nextMonthlyDiff == 0)
                                    <i class="fa fa-check-circle text-green"></i> Monthly events ran today!
                                @else
                                    <i class="fa fa-clock-o"></i> Next trigger in <strong>{{ $nextMonthlyDiff }}</strong> day(s) (day {{ $nextMonthlyDom }})
                                @endif
                            </div>
                        </div>

                        <h5 style="font-weight:700; margin-bottom:8px;"><i class="fa fa-chain text-purple"></i> Chain Events</h5>
                        <div style="background:#fff; border:1px solid #ddd; border-radius:4px; padding:10px; font-size:11px; margin-bottom:12px;">
                            @foreach($chainEvents as $chain)
                                <div style="margin-bottom:5px; padding:3px 0; border-bottom:1px solid #f0f0f0;">
                                    <i class="fa fa-arrow-right text-muted"></i> {{ $chain }}
                                </div>
                            @endforeach
                            <div style="margin-top:4px; color:#888; font-size:10px;">Auto-chained when trigger event ends</div>
                        </div>

                        <h5 style="font-weight:700; margin-bottom:8px;"><i class="fa fa-star text-orange"></i> Special Monthly</h5>
                        <div style="background:#fff; border:1px solid #ddd; border-radius:4px; padding:10px; font-size:12px;">
                            <div style="padding:4px 0; border-bottom:1px solid #f5f5f5; font-size:11px;">
                                <i class="fa fa-shield text-danger"></i>
                                <strong>Day 12:</strong> EVENT_TOP_HOL_GUILD
                                <div style="color:#888; font-size:10px; margin-left:16px;">Runs 13th–23rd &bull; All servers except last</div>
                            </div>
                            <div style="padding:4px 0; border-bottom:1px solid #f5f5f5; font-size:11px; margin-top:4px;">
                                <i class="fa fa-trophy text-warning"></i>
                                <strong>Day 2, 12, 22:</strong> EVENT_TOP_ARENA
                                <div style="color:#888; font-size:10px; margin-left:16px;">
                                    Start: next day &bull; End: +10 days
                                    <span style="color:#e67e22;">&bull; If February: ends last day of Feb</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@stop

@section('js')
<script>
// Live LA clock
function updateLAClock() {
    var now = new Date();
    var laTime = new Date(now.toLocaleString('en-US', {timeZone: 'America/Los_Angeles'}));
    var days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
    var el = document.getElementById('la-clock');
    if (el) {
        el.textContent = days[laTime.getDay()] + ', ' +
            String(laTime.getDate()).padStart(2,'0') + ' ' + months[laTime.getMonth()] + ' ' + laTime.getFullYear() + ' ' +
            String(laTime.getHours()).padStart(2,'0') + ':' + String(laTime.getMinutes()).padStart(2,'0') + ':' + String(laTime.getSeconds()).padStart(2,'0');
    }
}
setInterval(updateLAClock, 1000);
updateLAClock();

// Live countdown for events:schedule (next 04:50 LA)
var scheduleTarget = {{ $nextRunTs }};
function updateScheduleCountdown() {
    var now = Math.floor(Date.now() / 1000);
    var diff = scheduleTarget - now;
    if (diff < 0) diff = 0;
    var h = Math.floor(diff / 3600);
    var m = Math.floor((diff % 3600) / 60);
    var s = diff % 60;
    var el = document.getElementById('schedule-countdown');
    if (el) {
        var color = h > 0 ? '#3c8dbc' : '#f39c12';
        el.innerHTML = h > 0
            ? '<span style="color:' + color + ';">' + h + 'h ' + m + 'm ' + s + 's</span>'
            : '<span style="color:' + color + ';">' + m + 'm ' + s + 's</span>';
    }
}
setInterval(updateScheduleCountdown, 1000);
updateScheduleCountdown();

// Live countdown for calculate_total_point (next :00 or :30)
function updateCronCountdown() {
    var now = new Date();
    var laTime = new Date(now.toLocaleString('en-US', {timeZone: 'America/Los_Angeles'}));
    var min = laTime.getMinutes();
    var sec = laTime.getSeconds();
    var secsLeft;
    if (min < 30) {
        secsLeft = (30 - min) * 60 - sec;
    } else {
        secsLeft = (60 - min) * 60 - sec;
    }
    if (secsLeft <= 0) secsLeft = 0;
    var m2 = Math.floor(secsLeft / 60);
    var s2 = secsLeft % 60;
    var el = document.getElementById('cron-countdown');
    if (el) el.textContent = m2 + 'm ' + s2 + 's';
}
setInterval(updateCronCountdown, 1000);
updateCronCountdown();
</script>
@stop