@extends('layouts.master')

@section('title', 'Teaching Load Activity Log')


@section('style')

<style>

    /* Compact rows: the details start closed and are independent per entry. */
    .activity-item {
        border: 1px solid #e6eaf0;
        border-left: 4px solid #dee2e6;
        border-radius: 8px;
        padding: 12px 16px;
        margin-bottom: 12px;
        background: #fff;
    }

    .activity-item > .d-flex:first-child {
        gap: 10px;
        flex-wrap: wrap;
    }

    .activity-item > .mb-2 {
        margin-bottom: 5px !important;
        font-size: 13px;
    }

    .activity-entry-details {
        margin-top: 6px;
    }

    .activity-entry-details > summary {
        cursor: pointer;
        color: #0d6efd;
        font-size: 13px;
        font-weight: 600;
        width: fit-content;
        padding: 4px 0;
    }

    .workflow-log .activity-entry-details > summary {
        color: #198754;
    }

    .activity-entry-details > summary:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 3px;
        border-radius: 3px;
    }

    .activity-entry-details > summary .when-open {
        display: none;
    }

    .activity-entry-details[open] > summary .when-open {
        display: inline;
    }

    .activity-entry-details[open] > summary .when-closed {
        display: none;
    }

    .activity-entry-body {
        padding-top: 12px;
        margin-top: 6px;
        border-top: 1px solid #edf0f4;
    }

    .activity-item.data-log {
        border-left-color: #0d6efd;
    }

    .activity-item.workflow-log {
        border-left-color: #198754;
    }

    .activity-meta {
        font-size: 13px;
        color: #6c757d;
    }

    .activity-source {
        white-space: pre-wrap;
        word-break: break-word;
        font-size: 12px;
        background: #f8f9fa;
        padding: 12px;
        border-radius: 8px;
    }

    .change-table td,
    .change-table th {
        vertical-align: top;
        font-size: 13px;
    }

</style>

@endsection


@section('script')

<script>

document.addEventListener('DOMContentLoaded', function () {

    const buttons =
        document.querySelectorAll(
            '.activity-filter'
        );


    const items =
        document.querySelectorAll(
            '.activity-timeline-item'
        );


    buttons.forEach(function (button) {

        button.addEventListener(
            'click',
            function () {

                const filter =
                    this.dataset.filter;


                buttons.forEach(
                    function (btn) {

                        btn.classList.remove(
                            'active'
                        );

                    }
                );


                this.classList.add(
                    'active'
                );


                items.forEach(
                    function (item) {

                        if (
                            filter === 'ALL'
                            ||
                            item.dataset.group === filter
                        ) {

                            item.style.display =
                                '';

                        } else {

                            item.style.display =
                                'none';

                        }

                    }
                );

            }
        );

    });

});

</script>

@endsection


@section('content')

@include('layouts.header')
@include('layouts.title')


<section class="wrapper bg-light">

    <div class="container py-10 py-md-12">


        {{-- ===================================================== --}}
        {{-- HEADER --}}
        {{-- ===================================================== --}}

        <div class="d-flex justify-content-between align-items-center mb-5">

            <div>

                <h3 class="text-primary fw-bold mb-1">
                    Teaching Load Activity Log
                </h3>

                <div class="text-muted">

                    {{ $faculty->faculty_title ?? '' }}
                    {{ $faculty->faculty_firstname ?? '' }}
                    {{ $faculty->faculty_lastname ?? '' }}

                    <span class="mx-2">|</span>

                    Academic Year
                    {{ $teachingLoad->teaching_load_year }}

                    /

                    Semester
                    {{ $teachingLoad->teaching_load_semester }}

                </div>

            </div>


            <a
                href="{{ route('teachingload.view', $teachingLoad->teaching_load_id) }}"
                class="btn btn-light rounded-pill">

                <i class="uil uil-arrow-left"></i>

                Back to Teaching Load

            </a>

        </div>


        {{-- ===================================================== --}}
        {{-- SUMMARY --}}
        {{-- ===================================================== --}}

        <div class="card mb-5">

            <div class="card-body">

                <div class="row g-3">


                    <div class="col-md-3">

                        <div class="text-muted small">
                            Teaching Load ID
                        </div>

                        <strong>
                            {{ $teachingLoad->teaching_load_id }}
                        </strong>

                    </div>


                    <div class="col-md-3">

                        <div class="text-muted small">
                            Academic Year
                        </div>

                        <strong>
                            {{ $teachingLoad->teaching_load_year }}
                        </strong>

                    </div>


                    <div class="col-md-3">

                        <div class="text-muted small">
                            Semester
                        </div>

                        <strong>
                            {{ $teachingLoad->teaching_load_semester }}
                        </strong>

                    </div>


                    <div class="col-md-3">

                        <div class="text-muted small">
                            Current Status
                        </div>

                        @if($teachingLoad->teaching_load_status == 'Approved')

                            <span class="badge bg-soft-success text-success">
                                Approved
                            </span>

                        @elseif($teachingLoad->teaching_load_status == 'Rejected')

                            <span class="badge bg-soft-danger text-danger">
                                Rejected
                            </span>

                        @elseif($teachingLoad->teaching_load_status == 'Pending')

                            <span class="badge bg-soft-warning text-warning">
                                Pending
                            </span>

                        @else

                            <span class="badge bg-soft-secondary text-dark">
                                {{ $teachingLoad->teaching_load_status }}
                            </span>

                        @endif

                    </div>


                </div>

            </div>

        </div>


        {{-- ===================================================== --}}
        {{-- FILTER --}}
        {{-- ===================================================== --}}

        <div class="mb-4">

            <button
                type="button"
                class="btn btn-sm btn-primary rounded-pill activity-filter active"
                data-filter="ALL">

                All Activity

            </button>


            <button
                type="button"
                class="btn btn-sm btn-outline-primary rounded-pill activity-filter"
                data-filter="DATA">

                Data Changes

            </button>


            <button
                type="button"
                class="btn btn-sm btn-outline-success rounded-pill activity-filter"
                data-filter="WORKFLOW">

                Approval Workflow

            </button>

        </div>


        {{-- ===================================================== --}}
        {{-- TIMELINE --}}
        {{-- ===================================================== --}}

        <div class="card">

            <div class="card-body">


                @forelse($timeline as $item)


                    {{-- ================================================= --}}
                    {{-- DATA LOG --}}
                    {{-- ================================================= --}}

                    @if($item->event_group == 'DATA')

                        @php

                            $dataAction =
                                strtoupper(
                                    $item->activity_type
                                    ?? ''
                                );

                            $moduleLabel =
                                str_replace(
                                    '_',
                                    ' ',
                                    $item->module
                                    ?? ''
                                );

                        @endphp


                        <div
                            class="activity-item data-log activity-timeline-item"
                            data-group="DATA">


                            <div class="d-flex justify-content-between align-items-start mb-2">

                                <div>

                                    <span class="badge bg-soft-primary text-primary me-2">
                                        DATA
                                    </span>

                                    <strong>
                                        {{ $dataAction }}
                                    </strong>

                                    <span class="text-muted">
                                        {{ ucwords($moduleLabel) }}
                                    </span>

                                </div>


                                <div class="activity-meta">

                                    @if(!empty($item->created_at))

                                        {{ \Carbon\Carbon::parse($item->created_at)->format('d/m/Y H:i:s') }}

                                    @endif

                                </div>

                            </div>


                            <div class="mb-2">

                                <strong>Performed by:</strong>

                                @if(($item->actor_type ?? 'USER') == 'SYSTEM')
                                    System (Auto Sync)
                                @else
                                    {{ $item->actor_name }}
                                @endif

                                @if(($item->actor_type ?? 'USER') == 'SYSTEM')

                                    <span class="badge bg-soft-purple text-purple ms-2">
                                        SYSTEM
                                    </span>

                                @endif

                            </div>


                            {{-- One collapsible area per DATA event; summary and actor stay visible. --}}
                            <details class="activity-entry-details">
                                <summary>
                                    <span class="when-closed">View Details</span>
                                    <span class="when-open">Hide Details</span>
                                    @if(!empty($item->changed_fields) && is_countable($item->changed_fields))
                                        <span class="text-muted fw-normal">({{ count($item->changed_fields) }} fields)</span>
                                    @endif
                                </summary>

                                <div class="activity-entry-body">

                            <div class="activity-meta mb-3">

                                Module:
                                {{ $item->module ?? '-' }}

                                &nbsp; | &nbsp;

                                @if(($item->activity_type ?? '') === 'sync_summary')
                                    Teaching Load ID:
                                @else
                                    Record ID:
                                @endif
                                {{ $item->key_id ?? '-' }}

                            </div>


                            {{-- ============================================= --}}
                            {{-- BEFORE / AFTER --}}
                            {{-- ============================================= --}}

                            @if(($item->activity_type ?? '') === 'sync_summary')

                                @php
                                    $summary = $item->new_data_array ?? [];
                                    $notConfigured = ($summary['sync_status'] ?? '') === 'NOT_CONFIGURED';
                                @endphp

                                <div class="alert {{ $notConfigured ? 'alert-warning' : 'alert-light' }} border mb-2">
                                    <div class="fw-semibold mb-2">
                                        Sync Summary — {{ ucwords($moduleLabel) }}
                                        @if($notConfigured)
                                            <span class="badge bg-warning text-dark ms-2">NOT CONFIGURED</span>
                                        @else
                                            <span class="badge bg-soft-success text-success ms-2">COMPLETED</span>
                                        @endif
                                    </div>
                                    <div class="small mb-2">
                                        Academic Year: <strong>{{ $summary['teaching_load_year'] ?? $teachingLoad->teaching_load_year }}</strong>
                                        &nbsp;|&nbsp;
                                        Semester: <strong>{{ $summary['teaching_load_semester'] ?? $teachingLoad->teaching_load_semester }}</strong>
                                        &nbsp;|&nbsp;
                                        Trigger: <strong>{{ $summary['trigger'] ?? 'SYNC' }}</strong>
                                    </div>
                                    <div class="d-flex flex-wrap gap-3 small mb-2">
                                        <span>Added: <strong>{{ $summary['added'] ?? 0 }}</strong></span>
                                        <span>Updated: <strong>{{ $summary['updated'] ?? 0 }}</strong></span>
                                        <span>Unchanged: <strong>{{ $summary['unchanged'] ?? 0 }}</strong></span>
                                        <span>Skipped: <strong>{{ $summary['skipped'] ?? 0 }}</strong></span>
                                    </div>
                                    <div class="small text-muted">{{ $summary['note'] ?? '' }}</div>
                                </div>

                            @elseif(!empty($item->changed_fields))

                                <div class="table-responsive">

                                    <table class="table table-bordered table-sm change-table mb-3">

                                        <thead class="table-light">

                                            <tr>

                                                <th style="width:25%">
                                                    Field
                                                </th>

                                                <th style="width:37.5%">
                                                    Before
                                                </th>

                                                <th style="width:37.5%">
                                                    After
                                                </th>

                                            </tr>

                                        </thead>


                                        <tbody>

                                            @foreach($item->changed_fields as $change)

                                                @php

                                                    $oldValue =
                                                        $change['old'];

                                                    $newValue =
                                                        $change['new'];


                                                    if (
                                                        is_array($oldValue)
                                                        ||
                                                        is_object($oldValue)
                                                    ) {

                                                        $oldValue =
                                                            json_encode(
                                                                $oldValue,
                                                                JSON_UNESCAPED_UNICODE
                                                            );
                                                    }


                                                    if (
                                                        is_array($newValue)
                                                        ||
                                                        is_object($newValue)
                                                    ) {

                                                        $newValue =
                                                            json_encode(
                                                                $newValue,
                                                                JSON_UNESCAPED_UNICODE
                                                            );
                                                    }

                                                @endphp


                                                <tr>

                                                    <td>
                                                        <strong>
                                                            {{ $change['field'] }}
                                                        </strong>
                                                    </td>

                                                    <td>
                                                        {{ $oldValue === null || $oldValue === '' ? '-' : $oldValue }}
                                                    </td>

                                                    <td>
                                                        {{ $newValue === null || $newValue === '' ? '-' : $newValue }}
                                                    </td>

                                                </tr>

                                            @endforeach

                                        </tbody>

                                    </table>

                                </div>

                            @elseif(!empty($item->source))

                                {{-- Log เก่า ไม่มี OLD_DATA / NEW_DATA --}}

                                <div class="activity-source mt-2">
                                    {{ $item->source }}
                                </div>

                            @endif

                                </div>
                            </details>

                        </div>


                    {{-- ================================================= --}}
                    {{-- WORKFLOW LOG --}}
                    {{-- ================================================= --}}

                    @elseif($item->event_group == 'WORKFLOW')

                        @php

                            $workflowAction =
                                $item->flow_action
                                ?? '-';


                            $workflowLabelMap = [

                                'SUBMIT_FOR_REVIEW'
                                    => 'Submitted for Secretary Review',

                                'RESUBMIT_FOR_REVIEW'
                                    => 'Resubmitted for Secretary Review',

                                'RECOMMEND_APPROVAL'
                                    => 'Review / Approval Recommended',

                                'RECOMMEND_REJECTION'
                                    => 'Return / Rejection Recommended',

                                'COMPLETE_REVIEW'
                                    => 'Secretary Review Completed',

                                'SEND_TO_APPROVAL'
                                    => 'Sent to Approval Workflow',

                                'APPROVE'
                                    => 'Approved',

                                'APPROVE_FINAL'
                                    => 'Final Approval',

                                'REJECT_RETURN'
                                    => 'Returned to Previous Step',

                                'REJECT_FINAL'
                                    => 'Rejected'

                            ];


                            $workflowLabel =
                                $workflowLabelMap[
                                    $workflowAction
                                ]
                                ??
                                ucwords(
                                    strtolower(
                                        str_replace(
                                            '_',
                                            ' ',
                                            $workflowAction
                                        )
                                    )
                                );

                        @endphp


                        <div
                            class="activity-item workflow-log activity-timeline-item"
                            data-group="WORKFLOW">


                            <div class="d-flex justify-content-between align-items-start mb-2">

                                <div>

                                    <span class="badge bg-soft-success text-success me-2">
                                        WORKFLOW
                                    </span>

                                    <strong>
                                        {{ $workflowLabel }}
                                    </strong>

                                </div>


                                <div class="activity-meta">

                                    @if(!empty($item->created_at))

                                        {{ \Carbon\Carbon::parse($item->created_at)->format('d/m/Y H:i:s') }}

                                    @endif

                                </div>

                            </div>


                            <div class="mb-2">

                                <strong>Performed by:</strong>

                                {{ $item->actor_name }}

                            </div>


                            {{-- Approval steps, status and comments appear on demand. --}}
                            <details class="activity-entry-details">
                                <summary>
                                    <span class="when-closed">View Details</span>
                                    <span class="when-open">Hide Details</span>
                                </summary>

                                <div class="activity-entry-body">

                            <div class="activity-meta mb-2">

                                Step:
                                {{ $item->flow_order ?? '-' }}

                                @if(!empty($item->flow_actor))

                                    &nbsp; | &nbsp;

                                    Role:
                                    {{ $item->flow_actor }}

                                @endif

                            </div>


                            @if(!empty($item->flow_from_order) || !empty($item->flow_to_order))

                                <div class="mb-2">

                                    <strong>Route:</strong>

                                    Step
                                    {{ $item->flow_from_order ?? '-' }}

                                    <i class="uil uil-arrow-right mx-1"></i>

                                    Step
                                    {{ $item->flow_to_order ?? 'End' }}

                                </div>

                            @endif


                            @if(!empty($item->flow_result))

                                <div class="mb-2">

                                    <strong>Result:</strong>

                                    {{ $item->flow_result }}

                                </div>

                            @endif


                            @if(!empty($item->flow_status_before) || !empty($item->flow_status_after))

                                <div class="mb-2">

                                    <strong>Status:</strong>

                                    {{ $item->flow_status_before ?? '-' }}

                                    <i class="uil uil-arrow-right mx-1"></i>

                                    {{ $item->flow_status_after ?? '-' }}

                                </div>

                            @endif


                            @if(!empty($item->flow_comment))

                                <div class="alert alert-light border mt-3 mb-0">

                                    <strong>Comment:</strong>

                                    {{ $item->flow_comment }}

                                </div>

                            @endif

                                </div>
                            </details>

                        </div>


                    @endif


                @empty

                    <div class="text-center text-muted py-5">

                        <i class="uil uil-history fs-40 d-block mb-2"></i>

                        No activity history found.

                    </div>

                @endforelse


            </div>

        </div>


    </div>

</section>


@include('layouts.footer')

@endsection