@extends('layouts.app')
@section('title', 'Workflow Execution Details')

@section('content')
<div class="fixed-action-bar d-flex align-items-center justify-content-between">
    <div class="fixed-nav-title">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 p-0 bg-transparent" style="font-size: 0.75rem;">
                <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('horeca.reports.workflow-compliance') }}">Workflow Compliance</a></li>
                <li class="breadcrumb-item active" aria-current="page">Execution Details</li>
            </ol>
        </nav>
        <div class="fw-semibold mt-1">
            Execution Details: <span class="me-2">{{ $execution->workflow->icon ?? '' }}</span> {{ $execution->workflow->name ?? 'Unknown Workflow' }}
        </div>
    </div>
    <div class="d-flex align-items-center gap-2">
        <a href="{{ route('horeca.reports.workflow-compliance.csv', ['execution_id' => $execution->id]) }}"
            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', ['execution_id' => $execution->id]) }}"
            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', ['execution_id' => $execution->id]) }}"
            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-rotate-right"></i>
        </button>
        <a href="{{ route('horeca.reports.workflow-compliance') }}"
            class="btn btn-de-dark fixed-nav-btn rounded-circle p-1 d-inline-flex align-items-center justify-content-center mx-1"
            title="Close" style="width: 32px; height: 32px;">
            <i class="fa-solid fa-xmark"></i>
        </a>
    </div>
</div>

<div class="row mt-3">
    <div class="col-md-4">
        <div class="card mb-3 border shadow-sm">
            <div class="card-header bg-white fw-bold">Execution Summary</div>
            <div class="card-body">
                <table class="table table-sm table-borderless mb-0">
                    <tbody>
                        <tr>
                            <td class="text-muted w-50">Outlet</td>
                            <td class="fw-bold text-end">{{ $execution->outlet->name ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Executed By</td>
                            <td class="fw-bold text-end">{{ $execution->user->name ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Started At</td>
                            <td class="fw-bold text-end">{{ $execution->started_at ? $execution->started_at->format('Y-m-d H:i') : '-' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Completed At</td>
                            <td class="fw-bold text-end">{{ $execution->completed_at ? $execution->completed_at->format('Y-m-d H:i') : '-' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Status</td>
                            <td class="fw-bold text-end">
                                @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>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="col-md-8">
        <div class="card border shadow-sm">
            <div class="card-header bg-white fw-bold">Step Responses</div>
            <div class="card-body p-0">
                <ul class="list-group list-group-flush">
                    @forelse($execution->responses as $index => $response)
                        <li class="list-group-item p-3">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <span class="badge bg-secondary me-2">{{ $index + 1 }}</span>
                                    <span class="fw-bold">{{ $response->step->name ?? 'Unknown Step' }}</span>
                                </div>
                                @if($response->is_skipped)
                                    <span class="badge bg-warning">Skipped</span>
                                @endif
                            </div>
                            
                            <div class="ps-4 ms-2 mt-2">
                                @if($response->is_skipped)
                                    <div class="text-muted small">
                                        <strong>Skip Reason:</strong> {{ $response->skip_reason ?? 'No reason provided' }}
                                    </div>
                                @else
                                    <div class="mb-2">
                                        <strong>Answer:</strong>
                                        <span class="text-primary">
                                            @if(is_array($response->response_value))
                                                {{ implode(', ', array_map(function($v) { return is_bool($v) ? ($v ? 'Yes' : 'No') : (string)$v; }, $response->response_value)) }}
                                            @elseif(is_bool($response->response_value))
                                                {{ $response->response_value ? 'Yes' : 'No' }}
                                            @else
                                                {{ (string) $response->response_value }}
                                            @endif
                                            
                                            @if($response->response_text)
                                                ({{ $response->response_text }})
                                            @endif
                                        </span>
                                    </div>
                                    
                                    @if($response->remarks)
                                        <div class="text-muted small mb-2">
                                            <strong>Remarks:</strong> {{ $response->remarks }}
                                        </div>
                                    @endif
                                    
                                    @if($response->photo_urls && is_array($response->photo_urls) && count($response->photo_urls) > 0)
                                        <div class="d-flex gap-2 mt-2 flex-wrap">
                                            @foreach($response->photo_urls as $photo)
                                                <a href="{{ filter_var($photo, FILTER_VALIDATE_URL) ? $photo : asset('storage/' . $photo) }}" target="_blank">
                                                    <img src="{{ filter_var($photo, FILTER_VALIDATE_URL) ? $photo : asset('storage/' . $photo) }}" class="img-thumbnail" style="max-height: 80px; max-width: 80px; object-fit: cover;">
                                                </a>
                                            @endforeach
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </li>
                    @empty
                        <li class="list-group-item text-center text-muted p-4">
                            No responses recorded for this execution.
                        </li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
    .fixed-action-bar { z-index: 100; }
    .bg-soft-success { background-color: rgba(16, 185, 129, 0.1); }
    .bg-soft-warning { background-color: rgba(245, 158, 11, 0.1); }
</style>
@endsection