@extends('adminlte::page')

@section('title', 'Event Timeline')

@section('css')
<style>
    .gantt-wrap {
        overflow-x: auto;
        overflow-y: auto;
        max-height: 75vh;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: #fff;
    }
    .gantt-table {
        border-collapse: collapse;
        table-layout: fixed;
        white-space: nowrap;
        font-size: 11px;
    }
    .gantt-table th,
    .gantt-table td {
        padding: 0;
        border: 1px solid #e8e8e8;
    }
    /* Sticky first column */
    .gantt-table .col-label {
        position: sticky;
        left: 0;
        z-index: 3;
        background: #fff;
        border-right: 2px solid #bbb;
        min-width: 190px;
        max-width: 190px;
        width: 190px;
        padding: 4px 8px;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .gantt-table thead .col-label {
        z-index: 5;
        background: #2c3e50;
        color: #fff;
    }
    /* Sticky header */
    .gantt-table thead tr th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #ecf0f1;
    }
    .gantt-table thead tr:first-child th {
        top: 0;
        background: #2c3e50;
        color: #fff;
        z-index: 4;
    }
    .gantt-table thead tr:last-child th {
        top: 26px;
        z-index: 3;
    }
    .day-cell {
        width: 28px;
        min-width: 28px;
        max-width: 28px;
        height: 28px;
        text-align: center;
        vertical-align: middle;
        font-size: 10px;
        color: #888;
        font-weight: 600;
    }
    .day-cell.today-col { background: #fff9e6 !important; }
    .day-cell.weekend   { background: #f7f7f7; }
    .day-cell.month-hdr {
        background: #34495e;
        color: #ecf0f1;
        font-weight: 700;
        font-size: 11px;
        text-align: center;
        padding: 4px 0;
        height: 26px;
    }
    .day-hdr {
        background: #ecf0f1;
        height: 26px;
        line-height: 26px;
        font-size: 10px;
        text-align: center;
        color: #555;
    }
    .day-hdr.today-hdr { background: #f39c12; color: #fff; font-weight: 700; }
    .day-hdr.weekend-hdr { color: #c0392b; }

    /* Gantt bar cells */
    .gantt-row td.bar-cell {
        background: transparent;
        padding: 3px 0;
        height: 30px;
    }
    .gantt-bar {
        display: block;
        height: 20px;
        border-radius: 3px;
        line-height: 20px;
        padding: 0 6px;
        font-size: 10px;
        font-weight: 600;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        opacity: 0.92;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }
    .gantt-bar.bar-start { border-radius: 10px 3px 3px 10px; margin-left: 2px; }
    .gantt-bar.bar-end   { border-radius: 3px 10px 10px 3px; margin-right: 2px; }
    .gantt-bar.bar-both  { border-radius: 10px; margin: 0 2px; }
    .gantt-bar.bar-mid   { border-radius: 0; }

    .today-line {
        background: rgba(243,156,18,.18) !important;
    }
    .gantt-row:hover td { background: #f0f7ff !important; }
    .gantt-row:hover td.col-label { background: #dbeeff !important; }

    /* Category colors */
    .cat-weekly    { background: #2980b9; }
    .cat-monthly   { background: #8e44ad; }
    .cat-purchase  { background: #27ae60; }
    .cat-spender   { background: #d4a017; }
    .cat-guild     { background: #16a085; }
    .cat-top       { background: #c0392b; }
    .cat-stamina   { background: #e67e22; }
    .cat-announce  { background: #7f8c8d; }
    .cat-config    { background: #95a5a6; }
    .cat-chain     { background: #1abc9c; }
    .cat-server    { background: #2471a3; }
    .cat-trader    { background: #117a65; }
    .cat-other     { background: #5d6d7e; }

    .legend-dot {
        display: inline-block;
        width: 12px; height: 12px;
        border-radius: 3px;
        margin-right: 4px;
        vertical-align: middle;
    }
    .form-inline .form-group { margin-right: 10px; }
    .gantt-empty { color: #bbb; font-size: 11px; text-align: center; padding: 4px; }
</style>
@stop

@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:#2c3e50; color:#fff; border-radius:4px 4px 0 0;">
                <h3 class="box-title" style="color:#fff;"><i class="fa fa-bar-chart"></i> &nbsp;Event Timeline &mdash; Gantt Chart</h3>
                <div class="box-tools pull-right">
                    <a href="{{ route('events.index') }}" class="btn btn-default btn-xs" style="margin-top:2px;">
                        <i class="fa fa-list"></i> Event List
                    </a>
                </div>
            </div>
            <div class="box-body" style="padding:12px;">

                {{-- Date range picker --}}
                <form method="GET" action="{{ route('events.timeline') }}" class="form-inline" style="margin-bottom:14px;">
                    <div class="form-group">
                        <label style="font-weight:600; margin-right:6px;"><i class="fa fa-calendar"></i> From</label>
                        <input type="date" name="from" class="form-control input-sm" value="{{ $fromDate }}" style="width:140px;">
                    </div>
                    <div class="form-group">
                        <label style="font-weight:600; margin-right:6px;">To</label>
                        <input type="date" name="to" class="form-control input-sm" value="{{ $toDate }}" style="width:140px;">
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-search"></i> Show</button>
                    <a href="{{ route('events.timeline') }}" class="btn btn-default btn-sm" style="margin-left:4px;"><i class="fa fa-refresh"></i> Reset</a>
                    <span class="text-muted" style="margin-left:16px; font-size:12px;">
                        <i class="fa fa-info-circle"></i> {{ count($days) }} days &bull; {{ count($events) }} events
                    </span>
                </form>

                {{-- Legend --}}
                <div style="margin-bottom:10px; font-size:11px;">
                    @foreach([
                        ['weekly',   'Weekly'],
                        ['monthly',  'Monthly'],
                        ['purchase', 'Purchase'],
                        ['spender',  'Spender'],
                        ['guild',    'Guild'],
                        ['top',      'Top Event'],
                        ['stamina',  'Stamina'],
                        ['chain',    'Chain'],
                        ['server',   'Server'],
                        ['trader',   'Trader'],
                        ['config',   'Config'],
                        ['announce', 'Announce'],
                        ['other',    'Other'],
                    ] as $leg)
                        <span style="margin-right:10px; display:inline-block;">
                            <span class="legend-dot cat-{{ $leg[0] }}"></span>{{ $leg[1] }}
                        </span>
                    @endforeach
                </div>

                @if(count($events) === 0)
                    <div class="alert alert-info"><i class="fa fa-info-circle"></i> No events found in this date range.</div>
                @else
                {{-- Gantt Chart --}}
                @php
                    $today      = date('Y-m-d');
                    $todayTs    = strtotime($today);
                    $totalDays  = count($days);

                    // Group days by month for header
                    $months = [];
                    foreach ($days as $day) {
                        $m = substr($day, 0, 7);
                        if (!isset($months[$m])) $months[$m] = 0;
                        $months[$m]++;
                    }

                    // Category helper
                    $weeklyEvt  = ['EVENT_OPEN_ALL_CAVERN','EVENT_OPEN_ALL_DOJO','EVENT_MULTIPLY_CAVERN','EVENT_MULTIPLY_DOJO','EVENT_MULTIPLY_COF_GEM','EVENT_MULTIPLY_COF_ITEM','EVENT_GOBLIN_SHOP','EVENT_MULTIPLY_TREASURE_LAND','EVENT_SHOP_DISCOUNT','EVENT_USE_HERO_IN_ARENA'];
                    $monthlyEvt = ['EVENT_MULTIPLY_EXP','EVENT_MULTIPLY_NORMAL_ITEM','ITEM_DROP_EVENT','EVENT_PURCHASE_PROMOTE'];
                    $chainEvt   = ['PURCHASE_STAMINA','EVENT_BUY_STAMINA_UNLIMITED','EVENT_MULTIPLY_HEROIC_SOUL_STONE','EVENT_MULTIPLY_HEROIC_ITEM'];
                    $serverEvt  = ['EVENT_MULTIPLY_HEROIC_ITEM','EVENT_MULTIPLY_HEROIC_SOUL_STONE','EVENT_MULTIPLY_NORMAL_ITEM','EVENT_PURCHASE_PROMOTE','ITEM_DROP_EVENT','ITEM_DROP_HALLOWEEN_EVENT','ITEM_DROP_TRUNGTHU_EVENT'];
                    $traderEvt  = ['EVENT_EXCHANGE_ITEM','EVENT_TRADER_DIAMOND','EVENT_TRADER_GOLD'];
                    $configEvt  = ['AUTO_SELL_EVENT_ITEMS','DAILY_REWARD_BONUS','EVENT_PURCHASE_BEGINER','EVENT_PURCHASE_HEROES','EVENT_PURCHASE_ITEMS','EVENT_PURCHASE_PACKAGE','EVENT_PURCHASE_SKIN','EVENT_USE_ADMOB','EVENT_VIP_REWARD','USE_ADDITION_STATS','USE_CHANGE_LOG','USE_CUSTOM_BAN_CHAT','USE_CUSTOM_HERO_ITEM','USE_CUSTOM_KEY_SERVER','USE_CUSTOM_PACKAGE','USE_VALIDATE_CLIENT','EVENT_BEGINER_PURCHASE','EVENT_BEGINER_SPENDER','EVENT_BUY_STAMINA_NEW','EVENT_GROWTH_FUND','EVENT_GROWTH_GEM','EVENT_SUMMON_SOULSTONE'];

                    function getEventCategory($code, $weeklyEvt, $monthlyEvt, $chainEvt, $serverEvt, $traderEvt, $configEvt) {
                        if (in_array($code, $weeklyEvt))             return 'weekly';
                        if (in_array($code, $monthlyEvt))            return 'monthly';
                        if (in_array($code, $chainEvt))              return 'chain';
                        if (strpos($code, 'EVENT_DIAMOND_BUY_') === 0)   return 'purchase';
                        if (strpos($code, 'EVENT_DIAMOND_SPENDER') === 0) return 'spender';
                        if (strpos($code, 'EVENT_G_DIAMOND_') === 0)      return 'guild';
                        if (in_array($code, ['EVENT_TOP_ARENA','EVENT_TOP_HOL_GUILD'])) return 'top';
                        if ($code === 'EVENT_MULTIPLY_EXP')                return 'stamina';
                        if (strpos($code, 'EVENT_ANNOUNCE_') === 0)       return 'announce';
                        if (in_array($code, $traderEvt))               return 'trader';
                        if (in_array($code, $serverEvt))               return 'server';
                        if (in_array($code, $configEvt))               return 'config';
                        return 'other';
                    }
                @endphp

                <div class="gantt-wrap">
                    <table class="gantt-table">
                        <thead>
                            {{-- Row 1: Month headers --}}
                            <tr>
                                <th class="col-label" rowspan="2" style="vertical-align:middle; text-align:center; font-size:13px; letter-spacing:.5px;">
                                    <i class="fa fa-calendar-o"></i> Event
                                </th>
                                @foreach($months as $month => $count)
                                    <th class="day-cell month-hdr" colspan="{{ $count }}">
                                        {{ date('M Y', strtotime($month . '-01')) }}
                                    </th>
                                @endforeach
                            </tr>
                            {{-- Row 2: Day headers --}}
                            <tr>
                                @foreach($days as $day)
                                    @php
                                        $dow = date('N', strtotime($day));
                                        $isToday = ($day === $today);
                                        $isWeekend = in_array($dow, [6,7]);
                                        $hdrClass = 'day-hdr' . ($isToday ? ' today-hdr' : ($isWeekend ? ' weekend-hdr' : ''));
                                    @endphp
                                    <th class="day-cell {{ $hdrClass }}" title="{{ date('D d M', strtotime($day)) }}">
                                        {{ date('d', strtotime($day)) }}
                                    </th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($events as $event)
                                @php
                                    $beginDay = date('Y-m-d', $event['begin_ts']);
                                    $endDay   = date('Y-m-d', $event['end_ts']);

                                    // Skip events that don't overlap with the timeline range
                                    if ($beginDay > $days[$totalDays-1] || $endDay < $days[0]) continue;

                                    $cat = getEventCategory($event['code'], $weeklyEvt, $monthlyEvt, $chainEvt, $serverEvt, $traderEvt, $configEvt);

                                    // Clamp to visible range
                                    $clampedBegin = max($beginDay, $days[0]);
                                    $clampedEnd   = min($endDay,   $days[$totalDays-1]);

                                    // Find column indices
                                    $startIdx = array_search($clampedBegin, $days);
                                    $endIdx   = array_search($clampedEnd,   $days);
                                    if ($startIdx === false || $endIdx === false) continue;

                                    $barSpan   = $endIdx - $startIdx + 1;
                                    $beforeCols = $startIdx;
                                    $afterCols  = $totalDays - $endIdx - 1;

                                    $isStartClamped = ($beginDay < $days[0]);
                                    $isEndClamped   = ($endDay   > $days[$totalDays-1]);
                                    $barClass = 'gantt-bar cat-' . $cat;
                                    if (!$isStartClamped && !$isEndClamped) $barClass .= ' bar-both';
                                    elseif (!$isStartClamped) $barClass .= ' bar-start';
                                    elseif (!$isEndClamped)   $barClass .= ' bar-end';
                                    else $barClass .= ' bar-mid';

                                    $isActive = (time() >= $event['begin_ts'] && time() <= $event['end_ts']);
                                @endphp
                                <tr class="gantt-row">
                                    <td class="col-label" title="{{ $event['code'] }}">
                                        @if($isActive)
                                            <i class="fa fa-bolt text-green" style="font-size:9px;"></i>
                                        @else
                                            <i class="fa fa-circle-o text-muted" style="font-size:9px;"></i>
                                        @endif
                                        <a href="{{ route('events.edit', $event['code']) }}" style="color:inherit; text-decoration:none;" title="{{ $event['code'] }}">
                                            {{ $event['code'] }}
                                        </a>
                                    </td>

                                    {{-- Empty cells before bar --}}
                                    @if($beforeCols > 0)
                                        @foreach($days as $i => $day)
                                            @if($i < $beforeCols)
                                                @php $dow = date('N', strtotime($day)); $isToday = ($day === $today); @endphp
                                                <td class="day-cell bar-cell {{ $isToday ? 'today-line' : ($dow >= 6 ? 'weekend' : '') }}"></td>
                                            @endif
                                        @endforeach
                                    @endif

                                    {{-- Bar cell --}}
                                    <td class="bar-cell {{ in_array(date('N', strtotime($clampedBegin)), [6,7]) ? 'weekend' : '' }} {{ $clampedBegin === $today ? 'today-line' : '' }}"
                                        colspan="{{ $barSpan }}"
                                        title="{{ $event['code'] }}: {{ $event['date_begin'] }} → {{ $event['date_end'] }}">
                                        <a href="{{ route('events.edit', $event['code']) }}" style="text-decoration:none; display:block;">
                                            <span class="{{ $barClass }}" style="width:calc(100% - 4px);">
                                                @if($barSpan >= 3)
                                                    {{ $event['code'] }}
                                                @elseif($barSpan == 2)
                                                    {{ substr($event['code'], 0, 16) }}
                                                @else
                                                    &nbsp;
                                                @endif
                                            </span>
                                        </a>
                                    </td>

                                    {{-- Empty cells after bar --}}
                                    @if($afterCols > 0)
                                        @foreach($days as $i => $day)
                                            @if($i > $endIdx)
                                                @php $dow = date('N', strtotime($day)); $isToday = ($day === $today); @endphp
                                                <td class="day-cell bar-cell {{ $isToday ? 'today-line' : ($dow >= 6 ? 'weekend' : '') }}"></td>
                                            @endif
                                        @endforeach
                                    @endif
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif

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

@section('js')
<script>
// Highlight today column on hover-off reset
document.querySelectorAll('.gantt-row').forEach(function(row) {
    row.addEventListener('mouseenter', function() {
        row.querySelectorAll('td').forEach(function(td) {
            td.style.background = '';
        });
    });
});
// Scroll to today column
window.addEventListener('load', function() {
    var wrap = document.querySelector('.gantt-wrap');
    if (!wrap) return;
    var todayHdr = document.querySelector('.today-hdr');
    if (todayHdr) {
        var offset = todayHdr.offsetLeft - 200;
        wrap.scrollLeft = Math.max(0, offset);
    }
});
</script>
@stop