@extends('layouts.app')
@section('title', 'Workflow Compliance Report')

@section('content')
    {{-- Fixed Top Action Bar --}}
    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fw-semibold fixed-nav-title">Workflow Compliance Report</div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('horeca.reports.workflow-compliance.csv', request()->all()) }}"
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Export CSV" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-csv"></i>
            </a>
            <a href="{{ route('horeca.reports.workflow-compliance.excel', request()->all()) }}"
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Export Excel" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-excel"></i>
            </a>
            <a href="{{ route('horeca.reports.workflow-compliance.pdf', request()->all()) }}"
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Export PDF" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-file-pdf"></i>
            </a>
            <button
                class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
                title="Refresh" onclick="window.location.reload();" style="width: 32px; height: 32px;">
                <i class="fa-solid fa-sync"></i>
            </button>
            </div>
    </div>

    {{-- Filter Section --}}
    <div class="card mt-3 rounded-border">
        <div class="card-body">
            <form id="filtersForm" action="{{ route('horeca.reports.workflow-compliance') }}" method="GET">
                <div id="filtersCollapse">
                    <div class="row">
                        <div class="col-md-4 mb-2">
                            <label class="form-label">Date Range</label>
                            <input type="text" id="logDateRange" name="log_date_range" class="form-control"
                                value="{{ request('log_date_range', $startDate . ' to ' . $endDate) }}"
                                placeholder="Select Date Range..." readonly>
                        </div>
                        <div class="col-md-4 mb-2">
                            <label class="form-label">Outlet</label>
                            <select name="outlet_id" class="form-control select2" onchange="this.form.submit()">
                                <option value="">All Outlets</option>
                                @foreach($outlets as $id => $name)
                                    <option value="{{ $id }}" {{ request('outlet_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <a href="{{ route('horeca.reports.workflow-compliance') }}" class="btn btn-primary"
                                style="background-color: #FABB1E; border-color: #FABB1E; font-weight: 600; padding: 0.5rem 2rem; border-radius: 8px;">
                                Clear
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Metrics Cards --}}
    <div class="row g-3 mt-4 mb-4">
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Total Executed</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold tex-dark">{{ number_format($totalExecuted) }}</h2>
                        <div class="icon-circle bg-soft-primary text-primary">
                            <i class="fa-solid fa-play"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Workflows started</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Completion Rate</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold {{ $completionRate >= 90 ? 'text-success' : 'text-warning' }}">
                            {{ $completionRate }}%
                        </h2>
                        <div
                            class="icon-circle {{ $completionRate >= 90 ? 'bg-soft-success text-success' : 'bg-soft-warning text-warning' }}">
                            <i class="fa-solid fa-chart-pie"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Completed vs Started</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100 border-0 shadow-sm rounded-border">
                <div class="card-body">
                    <h6 class="text-muted text-uppercase small fw-bold mb-3">Avg Time</h6>
                    <div class="d-flex align-items-center justify-content-between">
                        <h2 class="mb-0 fw-bold text-dark">{{ $avgTime }}</h2>
                        <div class="icon-circle bg-soft-info text-info">
                            <i class="fa-solid fa-clock"></i>
                        </div>
                    </div>
                    <small class="text-muted mt-2 d-block">Per workflow</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Recent Executions Table --}}
    <div class="card border-0 shadow-sm rounded-border mb-4">
        <div
            class="card-header bg-white border-0 py-3 px-4 rounded-top-4 d-flex justify-content-between align-items-center">
            <h6 class="fw-bold mb-0 text-dark">Recent Workflow Executions</h6>
            @if(!request()->has('view_all'))
                <a href="{{ route('horeca.reports.workflow-compliance', array_merge(request()->all(), ['view_all' => 1])) }}"
                    class="btn btn-sm btn-ghost-primary rounded-pill">View All</a>
            @else
                <a href="{{ route('horeca.reports.workflow-compliance', request()->except('view_all')) }}"
                    class="btn btn-sm btn-ghost-primary rounded-pill">Show Paginated</a>
            @endif
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 text-nowrap">
                <thead class="bg-light text-muted">
                    <tr>
                        <th class="ps-4 border-0">Workflow</th>
                        <th class="border-0">Outlet</th>
                        <th class="border-0">Executed By</th>
                        <th class="border-0">Started At</th>
                        <th class="border-0 text-center">Status</th>
                        <th class="pe-4 border-0 text-center">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentExecutions as $execution)
                        <tr>
                            <td class="ps-4 fw-bold text-dark w-25 text-wrap">
                                {{ $execution->workflow->name ?? 'Unknown Workflow' }}
                            </td>
                            <td class="w-25 text-wrap">{{ $execution->outlet->name ?? 'Unknown Outlet' }}</td>
                            <td>{{ $execution->user->name ?? 'Unknown User' }}</td>
                            <td>{{ $execution->started_at ? \Carbon\Carbon::parse($execution->started_at)->format('Y-m-d H:i') : '-' }}
                            </td>
                            <td class="text-center">
                                @if($execution->status === 'completed')
                                    <span class="badge bg-soft-success text-success">Completed</span>
                                @else
                                    <span class="badge bg-soft-warning text-warning">In Progress</span>
                                @endif
                            </td>
                            <td class="pe-4 text-center">
                                <a href="{{ route('horeca.workflow-executions.show', $execution->id) }}"
                                    class="btn btn-sm btn-ghost-primary rounded-pill">Details</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5 text-muted">
                                <div class="d-flex flex-column align-items-center">
                                    <i class="fa-solid fa-clipboard-list text-muted opacity-25 mb-3"
                                        style="font-size: 2rem;"></i>
                                    <p class="mb-0">No workflow executions found for this period.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($recentExecutions instanceof \Illuminate\Pagination\LengthAwarePaginator)
            <div class="card-footer bg-white border-0 rounded-bottom-4 py-3 d-flex justify-content-center">
                {{ $recentExecutions->links() }}
            </div>
        @endif
    </div>
@endsection

@push('js')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Initialize Date Range Picker
            flatpickr("#logDateRange", {
                mode: "range",
                dateFormat: "Y-m-d",
                defaultDate: [
                    "{{ explode(' to ', request('log_date_range', $startDate . ' to ' . $endDate))[0] ?? $startDate }}",
                    "{{ explode(' to ', request('log_date_range', $startDate . ' to ' . $endDate))[1] ?? $endDate }}"
                ],
                onClose: function (selectedDates, dateStr, instance) {
                    if (selectedDates.length === 2) {
                        document.getElementById('filtersForm').submit();
                    }
                }
            });
        });
        
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "All Outlets",
                allowClear: true,
                width: '100%'
            });
        });
    </script>
    <style>
        .fixed-action-bar {
            z-index: 100;
        }

        .rounded-border {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .bg-soft-primary {
            background-color: rgba(59, 130, 246, 0.1);
        }

        .bg-soft-success {
            background-color: rgba(16, 185, 129, 0.1);
        }

        .bg-soft-warning {
            background-color: rgba(245, 158, 11, 0.1);
        }

        .bg-soft-info {
            background-color: rgba(6, 182, 212, 0.1);
        }

        .bg-soft-secondary {
            background-color: rgba(100, 116, 139, 0.1);
        }

        .btn-ghost-primary {
            color: #3b82f6;
            background: transparent;
            border: 1px solid transparent;
        }

        .btn-ghost-primary:hover {
            background: rgba(59, 130, 246, 0.1);
        }

        /* Standardized Form Styles for Filters */
        .form-label {
            color: #8D99AE;
            font-weight: 500;
            font-size: 0.85rem;
            margin-bottom: 8px;
            display: block;
        }

        .form-control {
            border: none !important;
            border-bottom: 1px solid #E5E9F2 !important;
            border-radius: 0 !important;
            padding: 0.4rem 0 !important;
            font-size: 0.95rem !important;
            background: transparent !important;
            color: #4E5E7A !important;
            box-shadow: none !important;
        }

        .form-control:focus {
            border-bottom-color: #FABB1E !important;
        }

    </style>
@endpush