@extends('layouts.app')
@section('title', 'Meeting Workflow Audit')

@push('stylesheets')
<style>
    .mws-audit-index-hero {
        background: linear-gradient(135deg, rgba(23, 162, 184, 0.08) 0%, rgba(23, 162, 184, 0.02) 100%);
        border: 1px solid rgba(23, 162, 184, 0.15);
        border-radius: .75rem;
    }
    .mws-audit-meeting-title-wrap {
        max-width: 32rem;
        line-height: 1.35;
    }
    .mws-audit-meeting-title-truncate {
        display: inline;
    }
    .mws-audit-ref {
        font-family: 'Times New Roman', Times, serif;
        font-size: .78rem;
        letter-spacing: .02em;
    }
    .mws-audit-table thead th {
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #6c757d;
        border-top: 0;
        white-space: nowrap;
    }
    .mws-audit-table tbody tr:hover {
        background: rgba(23, 162, 184, 0.04);
    }
    .mws-audit-empty {
        padding: 3rem 1.5rem;
        text-align: center;
        color: #6c757d;
    }
    .mws-audit-empty i {
        font-size: 2.5rem;
        opacity: .35;
        margin-bottom: .75rem;
    }
</style>
@endpush

@section('contents')
<section class="content">
<div class="container-fluid">
    @php
        $mwsLifecycleBadgeClasses = [
            'draft' => 'badge-secondary',
            'scheduled' => 'badge-info',
            'confirmed' => 'badge-primary',
            'ongoing' => 'badge-warning',
            'completed' => 'badge-success',
            'rescheduled' => 'badge-dark',
            'missed' => 'badge-danger',
            'cancelled' => 'badge-secondary',
        ];
    @endphp

    <div class="row mb-3">
        <div class="col-12">
            <div class="mws-audit-index-hero p-3 p-md-4 d-flex flex-wrap align-items-start justify-content-between">
                <div class="pr-3">
                    <h2 class="h4 mb-1"><i class="fas fa-project-diagram text-info mr-2"></i>Meeting Workflow / Audit</h2>
                    <p class="text-muted mb-0">Trace the complete meeting lifecycle — MoM co-signatory chain, forwarding history, and workflow actions.</p>
                </div>
                <a href="{{ route('meeting-workspace.dashboard') }}" class="btn btn-default btn-sm mt-2 mt-md-0">
                    <i class="fas fa-arrow-left mr-1"></i> Back to workspace
                </a>
            </div>
        </div>
    </div>

    <div class="card card-outline card-info {{ ($mwsAnyFilterInputPresent ?? false) ? '' : 'collapsed-card' }} mb-3">
        <div class="card-header">
            <h3 class="card-title mb-0"><i class="fas fa-filter mr-1"></i> Search &amp; filters</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas {{ ($mwsAnyFilterInputPresent ?? false) ? 'fa-minus' : 'fa-plus' }}"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            <form method="get" action="{{ route('meeting-workspace.workflow-audit.index') }}" class="row">
                <div class="col-lg-4 col-md-6 mb-2">
                    <label class="small text-muted mb-1">Search</label>
                    <input type="text" name="q" value="{{ $filters['q'] ?? '' }}" class="form-control" placeholder="Title, reference, description…">
                </div>
                <div class="col-lg-2 col-md-3 mb-2">
                    <label class="small text-muted mb-1">Status</label>
                    <select name="status" class="form-control">
                        <option value="">Any status</option>
                        @foreach ($meetingStatusesForFilter as $s)
                            <option value="{{ $s->value }}" @selected(($mwsStatusFilterSingleValue ?? null) === $s->value)>{{ $s->label() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-3 mb-2">
                    <label class="small text-muted mb-1">Type</label>
                    <select name="type" class="form-control">
                        <option value="">Any type</option>
                        @foreach ($meetingTypes as $t)
                            <option value="{{ $t }}" @selected(($filters['type'] ?? '') === $t)>{{ $t }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 mb-2">
                    <label class="small text-muted mb-1">Host / organizer</label>
                    <select name="host" class="form-control">
                        <option value="">Anyone</option>
                        @foreach ($usersForFilters as $u)
                            <option value="{{ $u->id }}" @selected((string) ($filters['host'] ?? '') === (string) $u->id)>{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 mb-2">
                    <label class="small text-muted mb-1">Participant</label>
                    <select name="participant" class="form-control">
                        <option value="">Anyone</option>
                        @foreach ($usersForFilters as $u)
                            <option value="{{ $u->id }}" @selected((string) ($filters['participant'] ?? '') === (string) $u->id)>{{ $u->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 mb-2">
                    <label class="small text-muted mb-1">Priority</label>
                    <select name="priority" class="form-control">
                        <option value="">Any</option>
                        @foreach ($priorities as $p)
                            <option value="{{ $p->value }}" @selected(($filters['priority'] ?? '') === $p->value)>{{ $p->label() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 mb-2">
                    <label class="small text-muted mb-1">Section</label>
                    <select name="section_id" class="form-control">
                        <option value="">Any section</option>
                        @foreach ($filterSections as $sectionId => $sectionName)
                            <option value="{{ $sectionId }}" @selected((string) ($filters['section_id'] ?? '') === (string) $sectionId)>{{ $sectionName }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-4 mb-2">
                    <label class="small text-muted mb-1">Department</label>
                    <select name="department_id" class="form-control">
                        <option value="">Any department</option>
                        @foreach ($filterDepartments as $departmentId => $departmentName)
                            <option value="{{ $departmentId }}" @selected((string) ($filters['department_id'] ?? '') === (string) $departmentId)>{{ $departmentName }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-lg-2 col-md-3 mb-2">
                    <label class="small text-muted mb-1">From date</label>
                    <input type="date" name="from" value="{{ $filters['from'] ?? '' }}" class="form-control">
                </div>
                <div class="col-lg-2 col-md-3 mb-2">
                    <label class="small text-muted mb-1">To date</label>
                    <input type="date" name="to" value="{{ $filters['to'] ?? '' }}" class="form-control">
                </div>
                <div class="col-12 mt-2">
                    <button type="submit" class="btn btn-info">
                        <i class="fas fa-search mr-1"></i> Apply filters
                    </button>
                    <a href="{{ route('meeting-workspace.workflow-audit.index') }}" class="btn btn-default ml-1">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <div class="card card-outline card-secondary">
        <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
            <h3 class="card-title mb-0">Meetings</h3>
            <span class="badge badge-light border">{{ count($meetings) }} result{{ count($meetings) === 1 ? '' : 's' }}</span>
        </div>
        <div class="card-body p-0">
            @if ($meetings === [])
                <div class="mws-audit-empty">
                    <div><i class="far fa-calendar-times d-block"></i></div>
                    <p class="mb-1 font-weight-medium">No meetings match your filters</p>
                    <p class="small mb-0">Try adjusting the search criteria or reset filters to see all accessible meetings.</p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table table-hover table-striped mws-audit-table mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>Reference</th>
                                <th>Meeting</th>
                                <th>Type</th>
                                <th>Date</th>
                                <th>Organizer</th>
                                <th>Status</th>
                                <th class="text-right">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($meetings as $row)
                                @php
                                    $statusVal = (string) ($row['status'] ?? '');
                                    $statusBadge = $mwsLifecycleBadgeClasses[$statusVal] ?? 'badge-secondary';
                                    $mwsTitleFull = trim((string) ($row['title'] ?? ''));
                                    $mwsTitleWords = $mwsTitleFull === '' ? [] : preg_split('/\s+/u', $mwsTitleFull, -1, PREG_SPLIT_NO_EMPTY);
                                    $mwsTitleWordLimit = 15;
                                    $mwsTitleNeedsTruncate = count($mwsTitleWords) > $mwsTitleWordLimit;
                                    $mwsTitleTruncated = $mwsTitleNeedsTruncate
                                        ? implode(' ', array_slice($mwsTitleWords, 0, $mwsTitleWordLimit)).'...'
                                        : $mwsTitleFull;
                                @endphp
                                <tr>
                                    <td class="align-middle">
                                        @if (! empty($row['reference_id']))
                                            <span class="badge badge-light border mws-audit-ref">{{ $row['reference_id'] }}</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td class="align-middle">
                                        <div class="mws-audit-meeting-title-wrap">
                                            @if ($mwsTitleNeedsTruncate)
                                                <span class="mws-audit-meeting-title-truncate font-weight-medium">{{ $mwsTitleTruncated }}</span>
                                                <span class="mws-audit-meeting-title-full font-weight-medium d-none" style="white-space: pre-wrap;">{{ $mwsTitleFull }}</span>
                                                <button type="button" class="btn btn-link btn-sm p-0 align-baseline ml-1 mws-audit-meeting-title-more">More</button>
                                                <button type="button" class="btn btn-link btn-sm p-0 align-baseline ml-1 mws-audit-meeting-title-less d-none">Less</button>
                                            @else
                                                <span class="font-weight-medium" style="white-space: pre-wrap;">{{ $mwsTitleFull !== '' ? $mwsTitleFull : '—' }}</span>
                                            @endif
                                        </div>
                                    </td>
                                    <td class="align-middle">
                                        @if (! empty($row['meeting_type']))
                                            <span class="badge badge-light text-info border">{{ $row['meeting_type'] }}</span>
                                        @else
                                            <span class="text-muted">—</span>
                                        @endif
                                    </td>
                                    <td class="align-middle text-nowrap">{{ $row['meeting_date'] !== '' ? $row['meeting_date'] : '—' }}</td>
                                    <td class="align-middle">
                                        <span class="text-muted small">{{ $row['organizer_name'] !== '' ? $row['organizer_name'] : '—' }}</span>
                                    </td>
                                    <td class="align-middle">
                                        <span class="badge {{ $statusBadge }}">{{ $row['status_label'] ?? ucfirst($statusVal) }}</span>
                                    </td>
                                    <td class="align-middle text-right text-nowrap">
                                        <a href="{{ route('meeting-workspace.meetings.workflow-audit', $row['id']) }}" class="btn btn-info btn-sm">
                                            <i class="fas fa-stream mr-1"></i> View audit
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
        @if ($meetings !== [])
            <div class="card-footer text-muted small">
                Showing up to {{ count($meetings) }} most recent matches. Use filters to narrow results.
            </div>
        @endif
    </div>
</div>
</section>
@endsection

@push('scripts')
<script>
(function () {
    document.addEventListener('click', function (e) {
        var moreBtn = e.target.closest('.mws-audit-meeting-title-more');
        if (moreBtn) {
            var wrap = moreBtn.closest('.mws-audit-meeting-title-wrap');
            if (!wrap) return;
            var truncated = wrap.querySelector('.mws-audit-meeting-title-truncate');
            var full = wrap.querySelector('.mws-audit-meeting-title-full');
            var lessBtn = wrap.querySelector('.mws-audit-meeting-title-less');
            if (!truncated || !full || !lessBtn) return;
            truncated.classList.add('d-none');
            full.classList.remove('d-none');
            moreBtn.classList.add('d-none');
            lessBtn.classList.remove('d-none');
            return;
        }
        var lessBtn = e.target.closest('.mws-audit-meeting-title-less');
        if (lessBtn) {
            var wrap = lessBtn.closest('.mws-audit-meeting-title-wrap');
            if (!wrap) return;
            var truncated = wrap.querySelector('.mws-audit-meeting-title-truncate');
            var full = wrap.querySelector('.mws-audit-meeting-title-full');
            var moreBtn = wrap.querySelector('.mws-audit-meeting-title-more');
            if (!truncated || !full || !moreBtn) return;
            full.classList.add('d-none');
            truncated.classList.remove('d-none');
            lessBtn.classList.add('d-none');
            moreBtn.classList.remove('d-none');
        }
    });
})();
</script>
@endpush