@extends('layouts.app')

@php
    $pageTitle = 'Employee Transaction Calendar';
    $pageHeading = 'Kalender Transaksi Employee';
    $pageDescription = 'Lihat jejak transaksi absensi per karyawan dalam tampilan kalender penuh.';
    $tableThemeClass = 'ops-datatable-theme ops-datatable-theme--employees';
    $initialDate = $filters['date_from'] ?? optional(\Illuminate\Support\Carbon::parse($summary['last_punch'] ?? now()))->toDateString();
@endphp

@section('content')
    <style>
        .employee-calendar-hero {
            position: relative;
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 22px 24px !important;
            border: 0 !important;
            border-left: 0 !important;
            background:
                radial-gradient(circle at 92% 12%, rgba(255,255,255,0.20), transparent 22%),
                linear-gradient(135deg, #12365b, #075985 58%, #0e7490) !important;
            box-shadow: 0 8px 24px rgba(15, 52, 86, 0.24) !important;
            overflow: hidden;
        }

        .employee-calendar-avatar {
            display: grid;
            place-items: center;
            width: 68px;
            height: 68px;
            flex: 0 0 68px;
            border: 3px solid rgba(255,255,255,0.42);
            border-radius: 22px;
            color: #12365b;
            background: #fff;
            box-shadow: 0 7px 16px rgba(3, 35, 59, 0.24);
            font-size: 28px;
            font-weight: 900;
        }

        .employee-calendar-hero h3,
        .employee-calendar-hero p {
            color: #fff !important;
        }

        .employee-calendar-hero p {
            max-width: 930px;
            color: rgba(255,255,255,0.82) !important;
        }

        .employee-calendar-hero-code {
            display: inline-flex;
            margin-top: 10px;
            padding: 5px 10px;
            border: 1px solid rgba(255,255,255,0.30);
            border-radius: 999px;
            color: #fff;
            background: rgba(255,255,255,0.13);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.04em;
        }

        .employee-calendar-stats .card {
            min-height: 112px !important;
            border: 0 !important;
            border-top: 0 !important;
            box-shadow: 0 5px 14px rgba(15, 23, 42, 0.15) !important;
        }

        .employee-calendar-stats .card:nth-child(1) {
            background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
        }

        .employee-calendar-stats .card:nth-child(2) {
            background: linear-gradient(135deg, #047857, #059669) !important;
        }

        .employee-calendar-stats .card:nth-child(3) {
            background: linear-gradient(135deg, #c2410c, #ea580c) !important;
        }

        .employee-calendar-stats .card:nth-child(4) {
            background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
        }

        .employee-calendar-stats .card .label,
        .employee-calendar-stats .card .meta {
            color: rgba(255,255,255,0.82) !important;
        }

        .employee-calendar-stats .card .label {
            font-weight: 800 !important;
        }

        .employee-calendar-stats .card .value {
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0,0,0,0.18);
        }

        .employee-calendar-filter-card {
            padding: 12px !important;
            border: 1px solid #93c5fd !important;
            border-left: 5px solid #2563eb !important;
            background: #eff6ff !important;
            box-shadow: 0 3px 10px rgba(37, 99, 235, 0.10) !important;
        }

        .employee-calendar-filter-card .filters {
            margin: 0 !important;
            border: 0 !important;
            background: transparent !important;
        }

        .employee-calendar-filter-card input,
        .employee-calendar-filter-card select {
            border-color: #93c5fd !important;
            font-weight: 600;
        }

        .employee-calendar-filter-card .primary {
            border-color: #1d4ed8 !important;
            background: #1d4ed8 !important;
            font-weight: 800 !important;
        }

        .employee-calendar-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.85fr) minmax(320px, 0.75fr);
            gap: 20px;
            align-items: start;
        }

        .employee-calendar-panel {
            display: grid;
            gap: 18px;
        }

        .employee-calendar-workspace {
            padding: 14px !important;
            border: 1px solid #94a3b8 !important;
            background: #f8fafc !important;
            box-shadow: 0 7px 20px rgba(15, 23, 42, 0.12) !important;
        }

        .employee-calendar-side {
            position: sticky;
            top: 82px;
        }

        .employee-calendar-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .employee-calendar-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid #bfdbfe;
            background: #dbeafe;
            color: #1e3a8a;
            font-size: 13px;
            font-weight: 800;
        }

        .employee-calendar-box {
            border: 1px solid #94a3b8;
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
            box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
        }

        .employee-calendar-box-head {
            padding: 18px 20px 14px;
            border-bottom: 1px solid #bfdbfe;
            background: linear-gradient(135deg, #e0f2fe, #eff6ff);
        }

        .employee-calendar-box-head h3 {
            margin: 0 0 6px;
            font-size: 20px;
            color: #0c4a6e;
            font-weight: 800;
        }

        .employee-calendar-box-head p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.7;
        }

        .employee-calendar-box-body {
            padding: 18px 20px 20px;
        }

        .employee-calendar-shell {
            min-height: 760px;
        }

        .employee-calendar-empty {
            padding: 22px;
            border-radius: 10px;
            border: 1px dashed #94a3b8;
            background: #f8fafc;
            color: #475569;
            line-height: 1.8;
            font-size: 14px;
        }

        .employee-calendar-detail-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .employee-calendar-detail-item {
            padding: 12px 14px;
            border-radius: 10px;
            border: 1px solid #cbd5e1;
            background: #f8fafc;
        }

        .employee-calendar-detail-item .label {
            display: block;
            margin-bottom: 6px;
            color: #64748b;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .employee-calendar-detail-item .value {
            color: #0f172a;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.6;
            word-break: break-word;
        }

        .employee-calendar-legend {
            display: grid;
            gap: 10px;
        }

        .employee-calendar-legend-row {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--ink);
        }

        .employee-calendar-legend-chip {
            width: 14px;
            height: 14px;
            border-radius: 4px;
            flex: 0 0 14px;
        }

        .employee-calendar-day-list {
            display: grid;
            gap: 10px;
        }

        .employee-calendar-day-item {
            padding: 12px 14px;
            border-left: 4px solid #2563eb;
            border-radius: 8px;
            border-top: 1px solid #cbd5e1;
            border-right: 1px solid #cbd5e1;
            border-bottom: 1px solid #cbd5e1;
            background: #f8fafc;
            transition: 0.16s ease;
        }

        .employee-calendar-day-item:hover {
            border-left-color: #0f766e;
            background: #eff6ff;
            transform: translateX(2px);
        }

        .employee-calendar-day-item strong {
            display: block;
            margin-bottom: 6px;
            color: #0f3f67;
        }

        .employee-calendar-day-item .meta {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.7;
        }

        .employee-calendar-day-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }

        .employee-calendar-day-head strong {
            font-size: 16px;
            color: #2f5143;
        }

        .employee-calendar-day-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            padding: 4px 9px;
            border-radius: 999px;
            border: 1px solid #bfdbfe;
            background: #dbeafe;
            color: #1d4ed8;
            font-size: 12px;
            font-weight: 800;
        }

        .fc {
            --fc-border-color: #cbd5e1;
            --fc-page-bg-color: #fff;
            --fc-neutral-bg-color: #e2e8f0;
            --fc-list-event-hover-bg-color: #dbeafe;
            --fc-today-bg-color: #fef3c7;
            --fc-button-text-color: #fff;
            --fc-button-bg-color: #1e3a5f;
            --fc-button-border-color: #1e3a5f;
            --fc-button-hover-bg-color: #075985;
            --fc-button-hover-border-color: #075985;
            --fc-button-active-bg-color: #0369a1;
            --fc-button-active-border-color: #0369a1;
        }

        .fc .fc-toolbar.fc-header-toolbar {
            margin-bottom: 1.2rem;
        }

        .fc .fc-toolbar-title {
            font-size: 1.45rem;
            color: #0f2942;
            font-weight: 900;
        }

        .fc .fc-button {
            border-radius: 7px;
            box-shadow: 0 2px 5px rgba(15, 23, 42, 0.18);
            font-weight: 800;
        }

        .fc .fc-col-header-cell-cushion,
        .fc .fc-daygrid-day-number,
        .fc .fc-list-day-text,
        .fc .fc-list-day-side-text {
            color: #0f3f67;
            text-decoration: none;
            font-weight: 700;
        }

        .fc .fc-timegrid-axis-cushion,
        .fc .fc-timegrid-slot-label-cushion {
            color: var(--muted);
            font-size: 12px;
        }

        .fc .fc-event {
            border-radius: 5px;
            padding: 2px 4px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
        }

        .fc .fc-daygrid-event {
            white-space: normal;
        }

        .fc .fc-daygrid-day-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 4px 6px 0;
        }

        .fc .fc-col-header-cell {
            background: #1e3a5f;
        }

        .fc .fc-col-header-cell-cushion {
            color: #fff !important;
            padding: 8px 4px;
        }

        .fc .fc-day-sat,
        .fc .fc-day-sun {
            background: #f8fafc;
        }

        .fc .fc-day-today {
            box-shadow: inset 0 0 0 2px #f59e0b;
        }

        .fc .fc-daygrid-day-number {
            position: static;
            padding: 0;
        }

        .employee-calendar-cell-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 42px;
            padding: 4px 9px;
            border-radius: 999px;
            border: 1px solid #bfdbfe;
            background: #dbeafe;
            color: #1e3a8a;
            font-size: 11px;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
        }

        .employee-calendar-cell-count.is-empty {
            border-color: #e2e8f0;
            background: #f1f5f9;
            color: #94a3b8;
        }

        .employee-calendar-side-card {
            padding: 16px !important;
            border: 1px solid #cbd5e1 !important;
            border-top: 4px solid #0284c7 !important;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
        }

        .employee-calendar-side-card .employee-calendar-box-head {
            margin: -16px -16px 16px !important;
            border-radius: 0 !important;
        }

        .employee-calendar-legend {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .employee-calendar-legend-row {
            padding: 8px 9px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #f8fafc;
            font-weight: 700;
        }

        @media (max-width: 1180px) {
            .employee-calendar-layout {
                grid-template-columns: 1fr;
            }

            .employee-calendar-side {
                position: static;
            }
        }

        @media (max-width: 720px) {
            .employee-calendar-hero {
                align-items: flex-start;
                padding: 18px !important;
            }

            .employee-calendar-avatar {
                width: 52px;
                height: 52px;
                flex-basis: 52px;
                border-radius: 15px;
                font-size: 21px;
            }

            .employee-calendar-detail-grid {
                grid-template-columns: 1fr;
            }

            .employee-calendar-shell {
                min-height: 680px;
            }

            .employee-calendar-legend {
                grid-template-columns: 1fr;
            }
        }
            #calendar-edit-manual.calendar-edit-open {
            width: 100% !important;
            min-height: 48px !important;
            border-radius: 999px !important;
            background: #1d6ff2 !important;
            color: #fff !important;
            border: 0 !important;
            font-size: 15px !important;
            font-weight: 900 !important;
            box-shadow: 0 10px 22px rgba(29, 111, 242, .22) !important;
        }
        #calendar-edit-form.calendar-edit-form {
            margin-top: 14px !important;
            padding: 16px !important;
            border-radius: 18px !important;
            border: 1px solid #d7e0ea !important;
            background: #fff !important;
            box-shadow: 0 8px 20px rgba(15, 23, 42, .08) !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 14px 16px !important;
        }
        #calendar-edit-form.calendar-edit-form label {
            color: #0f172a !important;
            font-size: 14px !important;
            font-weight: 800 !important;
        }
        #calendar-edit-form.calendar-edit-form input,
        #calendar-edit-form.calendar-edit-form select {
            min-height: 48px !important;
            border-radius: 14px !important;
            border: 1px solid #d7e0ea !important;
            padding: 10px 14px !important;
            font-size: 14px !important;
            background: #fff !important;
        }
        #calendar-edit-form.calendar-edit-form input:focus,
        #calendar-edit-form.calendar-edit-form select:focus {
            border-color: #1d6ff2 !important;
            box-shadow: 0 0 0 4px rgba(29, 111, 242, .12) !important;
        }
        #calendar-edit-form.calendar-edit-form label:first-of-type,
        #calendar-edit-form.calendar-edit-form label:nth-of-type(3),
        #calendar-edit-form.calendar-edit-form label:nth-of-type(4),
        #calendar-edit-form.calendar-edit-form #calendar-edit-feedback,
        #calendar-edit-form.calendar-edit-form .calendar-edit-actions {
            grid-column: 1 / -1 !important;
        }
        #calendar-edit-form .calendar-edit-actions { display:flex; gap:10px; }
        #calendar-edit-form .calendar-edit-actions button {
            min-height: 44px !important;
            border-radius: 999px !important;
            padding: 9px 18px !important;
            font-weight: 900 !important;
        }
        #calendar-edit-form .calendar-edit-actions .primary {
            flex: 1;
            background: #1d6ff2 !important;
            color: #fff !important;
            border: 0 !important;
        }
        #calendar-edit-form .calendar-edit-actions .pill-link {
            min-width: 96px;
            border: 1px solid #d7e0ea !important;
            background: #fff !important;
            color: #334155 !important;
        }
        @media (max-width: 640px) {
            #calendar-edit-form.calendar-edit-form { grid-template-columns: 1fr !important; }
        }
        #calendar-edit-form.calendar-edit-form {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            align-items: start !important;
        }
        #calendar-edit-form.calendar-edit-form label {
            min-width: 0 !important;
            margin: 0 !important;
        }
        #calendar-edit-form.calendar-edit-form label:first-of-type {
            grid-column: 1 / -1 !important;
        }
        #calendar-edit-form.calendar-edit-form label:nth-of-type(2),
        #calendar-edit-form.calendar-edit-form label:nth-of-type(3) {
            grid-column: auto !important;
        }
        #calendar-edit-form.calendar-edit-form label:nth-of-type(4),
        #calendar-edit-form.calendar-edit-form #calendar-edit-feedback,
        #calendar-edit-form.calendar-edit-form .calendar-edit-actions {
            grid-column: 1 / -1 !important;
        }
        #calendar-edit-form.calendar-edit-form input,
        #calendar-edit-form.calendar-edit-form select {
            display: block !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        #calendar-edit-form .calendar-edit-actions {
            justify-content: stretch !important;
            align-items: center !important;
            margin-top: 2px !important;
        }
        #calendar-edit-form .calendar-edit-actions .primary,
        #calendar-edit-form .calendar-edit-actions .pill-link {
            flex: 1 1 0 !important;
            text-align: center !important;
        }
</style>

    <section class="hero employee-calendar-hero">
        <div class="employee-calendar-avatar">{{ strtoupper(substr($employeeName, 0, 1)) }}</div>
        <div>
            <h3 style="margin: 0 0 8px; font-size: 22px;">{{ $employeeName }}</h3>
            <p style="margin: 0; color: var(--muted); line-height: 1.7;">
                Timeline transaksi absensi per employee untuk membaca pola clock, sebaran harian, dan detail transaksi mentah.
            </p>
            <span class="employee-calendar-hero-code">EMP CODE {{ $employee->emp_code }}</span>
        </div>
    </section>

    <section class="stats employee-calendar-stats" style="grid-template-columns: repeat(4, minmax(0, 1fr));">
        <div class="card">
            <div class="label">Emp Code</div>
            <div class="value" style="font-size: 32px;">{{ $employee->emp_code }}</div>
            <div class="meta">{{ $employeeName }}</div>
        </div>
        <div class="card">
            <div class="label">Total Transaksi</div>
            <div class="value">{{ number_format($summary['total']) }}</div>
            <div class="meta">Jumlah log sesuai filter aktif.</div>
        </div>
        <div class="card">
            <div class="label">Hari Ini</div>
            <div class="value">{{ number_format($summary['today']) }}</div>
            <div class="meta">Transaksi yang terekam hari ini.</div>
        </div>
        <div class="card">
            <div class="label">Mesin Digunakan</div>
            <div class="value">{{ number_format($summary['terminal_count']) }}</div>
            <div class="meta">Jumlah terminal unik yang pernah dipakai.</div>
        </div>
    </section>

    <section class="table-card employee-calendar-filter-card">
        <form method="GET" action="{{ route('employees.transactions-calendar', $employee->id) }}" class="filters">
            <input type="date" name="date_from" value="{{ $filters['date_from'] }}">
            <input type="date" name="date_to" value="{{ $filters['date_to'] }}">
            <select name="state_filter">
                <option value="">- Semua State -</option>
                @foreach ($stateLabels as $stateCode => $stateLabel)
                    <option value="{{ $stateCode }}" @selected((string) ($filters['state_filter'] ?? '') === (string) $stateCode)>{{ $stateLabel }}</option>
                @endforeach
            </select>
            <select name="terminal_filter">
                <option value="">- Semua Terminal -</option>
                @foreach ($terminals as $terminalSn)
                    <option value="{{ $terminalSn }}" @selected((string) ($filters['terminal_filter'] ?? '') === (string) $terminalSn)>{{ $terminalSn }}</option>
                @endforeach
            </select>
            <select name="source_filter">
                <option value="">- Semua Source -</option>
                <option value="device" @selected(($filters['source_filter'] ?? '') === 'device')>Device / Default</option>
                <option value="manual" @selected(($filters['source_filter'] ?? '') === 'manual')>Manual Correction</option>
                <option value="other" @selected(($filters['source_filter'] ?? '') === 'other')>Source Lain</option>
            </select>
            <select name="verify_type_filter">
                <option value="">- Semua Verify -</option>
                @foreach ($verifyTypeLabels as $verifyCode => $verifyLabel)
                    <option value="{{ $verifyCode }}" @selected((string) ($filters['verify_type_filter'] ?? '') === (string) $verifyCode)>{{ $verifyLabel }}</option>
                @endforeach
            </select>
            <select name="view">
                <option value="dayGridMonth" @selected(($filters['view'] ?? 'dayGridMonth') === 'dayGridMonth')>Month</option>
                <option value="timeGridWeek" @selected(($filters['view'] ?? '') === 'timeGridWeek')>Week</option>
                <option value="timeGridDay" @selected(($filters['view'] ?? '') === 'timeGridDay')>Day</option>
                <option value="listWeek" @selected(($filters['view'] ?? '') === 'listWeek')>List</option>
            </select>
            <button type="submit" class="primary">Terapkan Filter</button>
            <a href="{{ route('employees.transactions-calendar', $employee->id) }}" class="pill-link secondary">Reset</a>
            <a href="{{ route('employees.index') }}" class="pill-link secondary">Kembali ke Employee</a>
        </form>
    </section>

    <div class="employee-calendar-layout">
        <section class="table-card employee-calendar-panel employee-calendar-workspace">
            <div class="employee-calendar-badges">
                <span class="employee-calendar-badge">Employee: {{ $employeeName }}</span>
                <span class="employee-calendar-badge">Emp Code: {{ $employee->emp_code }}</span>
                @if (! empty($summary['last_punch']))
                    <span class="employee-calendar-badge">Last Punch: {{ \Illuminate\Support\Carbon::parse($summary['last_punch'])->format('Y-m-d H:i:s') }}</span>
                @endif
            </div>

            <div class="employee-calendar-box">
                <div class="employee-calendar-box-head">
                    <h3>Full Calendar Transaksi</h3>
                    <p>
                        Klik event di kalender untuk melihat detail transaksi. Navigasi bulan/minggu/hari akan mengambil data langsung dari server
                        sesuai range tampilan agar tetap ringan.
                    </p>
                </div>
                <div class="employee-calendar-box-body">
                    <div id="employee-transaction-calendar" class="employee-calendar-shell"></div>
                </div>
            </div>
        </section>

        <aside class="employee-calendar-panel employee-calendar-side">
            <section class="table-card employee-calendar-side-card">
                <div class="employee-calendar-box-head" style="margin: -18px -18px 16px; border-radius: 24px 24px 0 0;">
                    <h3>Detail Event</h3>
                    <p>Pilih salah satu transaksi di kalender untuk melihat data mentahnya.</p>
                </div>

                <div id="calendar-event-empty" class="employee-calendar-empty">
                    Belum ada event yang dipilih. Klik transaksi pada kalender untuk menampilkan ID transaksi, state, verify type, terminal, source, dan catatan raw.
                </div>

                <div id="calendar-event-detail" style="display:none;">
                    <div class="employee-calendar-detail-grid">
                        <div class="employee-calendar-detail-item">
                            <span class="label">Transaction ID</span>
                            <div class="value" id="calendar-detail-id">-</div>
                        </div>
                        <div class="employee-calendar-detail-item">
                            <span class="label">Punch Time</span>
                            <div class="value" id="calendar-detail-time">-</div>
                        </div>
                        <div class="employee-calendar-detail-item">
                            <span class="label">State</span>
                            <div class="value" id="calendar-detail-state">-</div>
                        </div>
                        <div class="employee-calendar-detail-item">
                            <span class="label">Verify</span>
                            <div class="value" id="calendar-detail-verify">-</div>
                        </div>
                        <div class="employee-calendar-detail-item">
                            <span class="label">Work Code</span>
                            <div class="value" id="calendar-detail-work-code">-</div>
                        </div>
                        <div class="employee-calendar-detail-item">
                            <span class="label">Terminal</span>
                            <div class="value" id="calendar-detail-terminal">-</div>
                        </div>
                        <div class="employee-calendar-detail-item">
                            <span class="label">Source</span>
                            <div class="value" id="calendar-detail-source">-</div>
                        </div>
                        <div class="employee-calendar-detail-item">
                            <span class="label">Upload Time</span>
                            <div class="value" id="calendar-detail-upload">-</div>
                        </div>
                    </div>

                    <div class="employee-calendar-detail-item" style="margin-top: 12px;">
                        <span class="label">Reserved / Notes</span>
                        <div class="value" id="calendar-detail-notes">-</div>
                    </div>
                    <button type="button" id="calendar-edit-manual" class="calendar-edit-open" style="display:none;">Edit IN / OUT Manual</button>
                    <form id="calendar-edit-form" class="calendar-edit-form" style="display:none;">
                        <input type="hidden" id="calendar-edit-id">
                        <label>Punch Time<input type="datetime-local" id="calendar-edit-time" step="1" required></label>
                        <label>Jenis
                            <select id="calendar-edit-state" required><option value="0">CHECK_IN</option><option value="1">CHECK_OUT</option></select>
                        </label>
                        <label>Alasan<input type="text" id="calendar-edit-reason" maxlength="255" required></label>
                        <label>Password<input type="password" id="calendar-edit-password" required autocomplete="current-password"></label>
                        <div id="calendar-edit-feedback" class="muted"></div>
                        <div class="calendar-edit-actions"><button type="submit" class="primary">Simpan</button><button type="button" id="calendar-edit-cancel" class="pill-link secondary">Batal</button></div>
                    </form>
                </div>
            </section>

            <section class="table-card employee-calendar-side-card">
                <div class="employee-calendar-box-head" style="margin: -18px -18px 16px; border-radius: 24px 24px 0 0;">
                    <h3>Transaksi Tanggal Terpilih</h3>
                    <p>Klik tanggal pada kalender untuk menampilkan semua transaksi hari itu di panel kanan.</p>
                </div>

                <div id="calendar-day-empty" class="employee-calendar-empty">
                    Belum ada tanggal yang dipilih. Klik tanggal pada kalender untuk menampilkan daftar transaksi harian.
                </div>

                <div id="calendar-day-detail" style="display:none;">
                    <div class="employee-calendar-day-head">
                        <strong id="calendar-day-title">-</strong>
                        <span class="employee-calendar-day-count" id="calendar-day-count">0 transaksi</span>
                    </div>
                    <div class="employee-calendar-day-list" id="calendar-day-list"></div>
                </div>
            </section>

            <section class="table-card employee-calendar-side-card">
                <div class="employee-calendar-box-head" style="margin: -18px -18px 16px; border-radius: 24px 24px 0 0;">
                    <h3>Legend State</h3>
                    <p>Warna event mengikuti state transaksi agar pola clock lebih cepat terbaca.</p>
                </div>
                <div class="employee-calendar-legend">
                    <div class="employee-calendar-legend-row"><span class="employee-calendar-legend-chip" style="background:#dff5e8; border:1px solid #3f8f68;"></span> CHECK_IN</div>
                    <div class="employee-calendar-legend-row"><span class="employee-calendar-legend-chip" style="background:#e0ecfb; border:1px solid #4470ad;"></span> CHECK_OUT</div>
                    <div class="employee-calendar-legend-row"><span class="employee-calendar-legend-chip" style="background:#fff2cf; border:1px solid #c79216;"></span> BREAK_OUT</div>
                    <div class="employee-calendar-legend-row"><span class="employee-calendar-legend-chip" style="background:#efe7ff; border:1px solid #7f56d9;"></span> BREAK_IN</div>
                    <div class="employee-calendar-legend-row"><span class="employee-calendar-legend-chip" style="background:#ffe1d6; border:1px solid #d16a45;"></span> OT_IN</div>
                    <div class="employee-calendar-legend-row"><span class="employee-calendar-legend-chip" style="background:#f5d6db; border:1px solid #be4566;"></span> OT_OUT</div>
                </div>
            </section>

            <section class="table-card employee-calendar-side-card">
                <div class="employee-calendar-box-head" style="margin: -18px -18px 16px; border-radius: 24px 24px 0 0;">
                    <h3>Info Kalender</h3>
                    <p>
                        Transaksi terbaru sekarang dijadikan <strong>seed event</strong> langsung ke kalender. Jadi saat halaman dibuka,
                        operator langsung melihat jejak transaksi pada grid kalender tanpa bergantung pada panel daftar di samping.
                    </p>
                </div>
                <div class="employee-calendar-empty" style="padding: 16px 18px;">
                    @if ($recentTransactions->isNotEmpty())
                        Seed awal memuat {{ $recentTransactions->count() }} transaksi terbaru. Setelah itu kalender tetap mencoba memuat event penuh dari server sesuai rentang tampilan aktif.
                    @else
                        Belum ada transaksi pada filter aktif, jadi tidak ada seed event yang dimasukkan ke kalender.
                    @endif
                </div>
            </section>
        </aside>
    </div>

    <script src="{{ asset('vendor/fullcalendar/index.global.min.js') }}"></script>
    <script src="{{ asset('vendor/fullcalendar/locales-all.global.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const calendarEl = document.getElementById('employee-transaction-calendar');

            if (!calendarEl || typeof FullCalendar === 'undefined') {
                return;
            }

            const emptyDetail = document.getElementById('calendar-event-empty');
            const detailPanel = document.getElementById('calendar-event-detail');
            const dayEmpty = document.getElementById('calendar-day-empty');
            const dayDetail = document.getElementById('calendar-day-detail');
            const dayTitle = document.getElementById('calendar-day-title');
            const dayCount = document.getElementById('calendar-day-count');
            const dayList = document.getElementById('calendar-day-list');
            const seedEvents = @json($calendarSeedEvents);
            const feedUrl = @json(route('employees.transactions-calendar.events', $employee->id));
            let selectedDateKey = null;
            const detailMap = {
                id: document.getElementById('calendar-detail-id'),
                time: document.getElementById('calendar-detail-time'),
                state: document.getElementById('calendar-detail-state'),
                verify: document.getElementById('calendar-detail-verify'),
                workCode: document.getElementById('calendar-detail-work-code'),
                terminal: document.getElementById('calendar-detail-terminal'),
                source: document.getElementById('calendar-detail-source'),
                upload: document.getElementById('calendar-detail-upload'),
                notes: document.getElementById('calendar-detail-notes')
            };
            const editButton = document.getElementById('calendar-edit-manual');
            const editForm = document.getElementById('calendar-edit-form');
            const editId = document.getElementById('calendar-edit-id');
            const editTime = document.getElementById('calendar-edit-time');
            const editState = document.getElementById('calendar-edit-state');
            const editReason = document.getElementById('calendar-edit-reason');
            const editPassword = document.getElementById('calendar-edit-password');
            const editFeedback = document.getElementById('calendar-edit-feedback');
            const correctionUrl = @json(route('employees.transactions-calendar.correction', $employee->id));
            let selectedManualEvent = null;

            const showDetail = function (event) {
                const props = event.extendedProps || {};

                detailMap.id.textContent = props.transaction_id || '-';
                detailMap.time.textContent = props.punch_time || event.startStr || '-';
                detailMap.state.textContent = props.punch_state_label || '-';
                detailMap.verify.textContent = props.verify_type_label || '-';
                detailMap.workCode.textContent = props.work_code_label || '-';
                detailMap.terminal.textContent = props.terminal_sn || '-';
                detailMap.source.textContent = props.source_label || '-';
                detailMap.upload.textContent = props.upload_time || '-';
                detailMap.notes.textContent = props.reserved || '-';
                selectedManualEvent = props.can_edit_manual ? event : null;
                editButton.style.display = selectedManualEvent ? 'block' : 'none';
                editForm.style.display = 'none';

                emptyDetail.style.display = 'none';
                detailPanel.style.display = 'block';
            };

            editButton.addEventListener('click', function () {
                if (!selectedManualEvent) return;
                const props = selectedManualEvent.extendedProps || {};
                editId.value = props.transaction_id || '';
                editTime.value = String(props.punch_time || '').replace(' ', 'T').slice(0, 19);
                editState.value = String(props.punch_state ?? 0);
                editReason.value = '';
                editPassword.value = '';
                editFeedback.textContent = '';
                editForm.style.display = 'grid';
            });
            document.getElementById('calendar-edit-cancel').addEventListener('click', function () { editForm.style.display = 'none'; });
            editForm.addEventListener('submit', async function (event) {
                event.preventDefault();
                editFeedback.textContent = 'Menyimpan...';
                const response = await fetch(correctionUrl, {
                    method: 'POST',
                    headers: {'Accept':'application/json','Content-Type':'application/json','X-CSRF-TOKEN':document.querySelector('meta[name="csrf-token"]').content},
                    body: JSON.stringify({transaction_id:editId.value,punch_time:editTime.value,punch_state:editState.value,reason:editReason.value,password_confirmation:editPassword.value})
                });
                const payload = await response.json();
                if (!response.ok) { editFeedback.textContent = payload.message || Object.values(payload.errors || {})[0]?.[0] || 'Gagal menyimpan.'; return; }
                editFeedback.textContent = payload.message;
                editForm.style.display = 'none';
                selectedManualEvent = null;
                editButton.style.display = 'none';
                calendar.refetchEvents();
            });

            const formatDateLabel = function (dateKey) {
                const date = new Date(dateKey + 'T00:00:00');

                return new Intl.DateTimeFormat('id-ID', {
                    weekday: 'long',
                    day: '2-digit',
                    month: 'long',
                    year: 'numeric'
                }).format(date);
            };

            const getDateKey = function (dateValue) {
                if (!dateValue) {
                    return '';
                }

                if (typeof dateValue === 'string') {
                    return dateValue.slice(0, 10);
                }

                return dateValue.toISOString().slice(0, 10);
            };

            const sortEventsByTime = function (events) {
                return events.slice().sort(function (a, b) {
                    return new Date(a.start).getTime() - new Date(b.start).getTime();
                });
            };

            const renderSelectedDateEvents = function (dateKey) {
                selectedDateKey = dateKey;

                const items = sortEventsByTime(calendar.getEvents().filter(function (calendarEvent) {
                    return getDateKey(calendarEvent.start) === dateKey;
                }));

                dayEmpty.style.display = 'none';
                dayDetail.style.display = 'block';
                dayTitle.textContent = formatDateLabel(dateKey);
                dayCount.textContent = items.length + ' transaksi';
                dayList.innerHTML = '';

                if (!items.length) {
                    dayList.innerHTML = '<div class="employee-calendar-empty">Tidak ada transaksi pada tanggal ini sesuai filter aktif.</div>';
                    return;
                }

                items.forEach(function (calendarEvent) {
                    const props = calendarEvent.extendedProps || {};
                    const item = document.createElement('div');
                    item.className = 'employee-calendar-day-item';
                    item.style.borderLeftColor = calendarEvent.borderColor || '#2563eb';
                    item.innerHTML = ''
                        + '<strong>' + (props.punch_time || calendarEvent.startStr || '-') + ' · ' + (props.punch_state_label || calendarEvent.title || '-') + '</strong>'
                        + '<div class="meta">'
                        + 'ID ' + (props.transaction_id || '-') + ' · Verify ' + (props.verify_type_label || '-') + ' · Terminal ' + (props.terminal_sn || '-')
                        + '<br>'
                        + 'Source: ' + (props.source_label || '-') + ' · Upload: ' + (props.upload_time || '-')
                        + '<br>'
                        + 'Notes: ' + (props.reserved || '-')
                        + '</div>';

                    item.addEventListener('click', function () {
                        showDetail(calendarEvent);
                    });

                    dayList.appendChild(item);
                });
            };

            const renderDayTransactionCounts = function () {
                const countMap = {};

                calendarEl.querySelectorAll('.employee-calendar-cell-count').forEach(function (node) {
                    node.remove();
                });

                calendar.getEvents().forEach(function (calendarEvent) {
                    const key = getDateKey(calendarEvent.start);
                    countMap[key] = (countMap[key] || 0) + 1;
                });

                calendarEl.querySelectorAll('.fc-daygrid-day[data-date]').forEach(function (cell) {
                    const dateKey = cell.getAttribute('data-date');
                    const top = cell.querySelector('.fc-daygrid-day-top');

                    if (!top) {
                        return;
                    }

                    const badge = document.createElement('button');
                    badge.type = 'button';
                    badge.className = 'employee-calendar-cell-count' + ((countMap[dateKey] || 0) < 1 ? ' is-empty' : '');
                    badge.textContent = (countMap[dateKey] || 0) + ' tx';
                    badge.addEventListener('click', function (event) {
                        event.preventDefault();
                        event.stopPropagation();
                        renderSelectedDateEvents(dateKey);
                    });

                    top.appendChild(badge);
                });
            };

            const buildEventFeedParams = function (fetchInfo) {
                const params = new URLSearchParams();
                params.set('start', fetchInfo.startStr);
                params.set('end', fetchInfo.endStr);

                const dateFrom = @json($filters['date_from']);
                const dateTo = @json($filters['date_to']);
                const stateFilter = @json($filters['state_filter']);
                const terminalFilter = @json($filters['terminal_filter']);
                const sourceFilter = @json($filters['source_filter']);
                const verifyTypeFilter = @json($filters['verify_type_filter']);

                if (dateFrom) {
                    params.set('date_from', dateFrom);
                }

                if (dateTo) {
                    params.set('date_to', dateTo);
                }

                if (stateFilter !== null && stateFilter !== '') {
                    params.set('state_filter', stateFilter);
                }

                if (terminalFilter) {
                    params.set('terminal_filter', terminalFilter);
                }

                if (sourceFilter) {
                    params.set('source_filter', sourceFilter);
                }

                if (verifyTypeFilter !== null && verifyTypeFilter !== '') {
                    params.set('verify_type_filter', verifyTypeFilter);
                }

                return params;
            };

            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: @json($filters['view'] ?? 'dayGridMonth'),
                initialDate: @json($initialDate),
                locale: 'id',
                firstDay: 1,
                height: 'auto',
                navLinks: false,
                nowIndicator: true,
                dayMaxEvents: true,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                buttonText: {
                    today: 'Hari Ini',
                    month: 'Bulan',
                    week: 'Minggu',
                    day: 'Hari',
                    list: 'Daftar'
                },
                eventTimeFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                },
                events: function (fetchInfo, successCallback, failureCallback) {
                    const params = buildEventFeedParams(fetchInfo);

                    fetch(feedUrl + '?' + params.toString(), {
                        method: 'GET',
                        credentials: 'same-origin',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                        .then(function (response) {
                            return response.text().then(function (text) {
                                return {
                                    ok: response.ok,
                                    text: text
                                };
                            });
                        })
                        .then(function (payload) {
                            let parsed = [];

                            try {
                                parsed = JSON.parse(payload.text);
                            } catch (error) {
                                parsed = [];
                            }

                            if (payload.ok && Array.isArray(parsed)) {
                                successCallback(parsed);
                                return;
                            }

                            if (seedEvents.length > 0) {
                                successCallback(seedEvents);
                                return;
                            }

                            if (payload.ok && Array.isArray(parsed)) {
                                successCallback(parsed);
                                return;
                            }

                            failureCallback(new Error('Gagal memuat event kalender.'));
                        })
                        .catch(function (error) {
                            if (seedEvents.length > 0) {
                                successCallback(seedEvents);
                                return;
                            }

                            failureCallback(error);
                        });
                },
                loading: function (isLoading) {
                    if (isLoading) {
                        emptyDetail.style.display = 'block';
                        if (detailPanel.style.display !== 'block') {
                            emptyDetail.textContent = 'Memuat event transaksi ke kalender...';
                        }
                        return;
                    }

                    if (detailPanel.style.display !== 'block') {
                        emptyDetail.textContent = 'Belum ada event yang dipilih. Klik transaksi pada kalender untuk menampilkan detail transaksi mentahnya.';
                    }
                },
                dateClick: function (info) {
                    renderSelectedDateEvents(info.dateStr);
                },
                eventClick: function (info) {
                    showDetail(info.event);
                    renderSelectedDateEvents(getDateKey(info.event.start));
                },
                eventsSet: function () {
                    renderDayTransactionCounts();

                    if (selectedDateKey) {
                        renderSelectedDateEvents(selectedDateKey);
                    }
                },
                datesSet: function () {
                    window.setTimeout(renderDayTransactionCounts, 0);
                },
                eventDidMount: function (info) {
                    const props = info.event.extendedProps || {};
                    info.el.title = [
                        info.event.title,
                        props.terminal_sn ? ('Terminal: ' + props.terminal_sn) : '',
                        props.source_label ? ('Source: ' + props.source_label) : ''
                    ].filter(Boolean).join(' | ');
                }
            });

            calendar.render();
            renderDayTransactionCounts();

            const initialSelectedDate = @json($initialDate);
            if (initialSelectedDate) {
                renderSelectedDateEvents(initialSelectedDate);
            }
        });
    </script>
@endsection