@extends('layouts.master')

@section('content')

<div class="workflow-page">

    <div class="workflow-header">

        <div>

            <h1 class="workflow-title">
                {{ $request->workflow_name }}
            </h1>

            <div class="workflow-subtitle">
                Workflow Request Details
            </div>

        </div>

        <div class="workflow-actions">

            <a href="{{ route('workflow.pending') }}"
               class="workflow-btn workflow-btn-outline">

                Back

            </a>

        </div>

    </div>

    {{-- REQUEST INFORMATION --}}

    <div class="workflow-card">

        <div class="workflow-card-header">
            Request Information
        </div>

        <div class="workflow-card-body">

            <div class="workflow-grid-4">

                <div>

                    <strong>Workflow</strong><br>

                    {{ $request->workflow_name }}

                </div>

                <div>

                    <strong>Reference Type</strong><br>

                    {{ $request->reference_type }}

                </div>

                <div>

                    <strong>Reference ID</strong><br>

                    {{ $request->reference_id }}

                </div>

                <div>

                    <strong>Status</strong><br>

                    @if($request->status === 'PENDING')

                        <span class="workflow-badge workflow-badge-orange">
                            Pending
                        </span>

                    @elseif($request->status === 'APPROVED')

                        <span class="workflow-badge workflow-badge-green">
                            Approved
                        </span>

                    @elseif($request->status === 'REJECTED')

                        <span class="workflow-badge workflow-badge-red">
                            Rejected
                        </span>

                    @elseif($request->status === 'RETURNED')

                        <span class="workflow-badge workflow-badge-warning">
                            Returned
                        </span>

                    @else

                        {{ $request->status }}

                    @endif

                </div>

                <div>

                    <strong>Requested By</strong><br>

                    {{ $request->requester_name ?? '-' }}

                </div>

                <div>

                    <strong>Submitted At</strong><br>

                    {{ $request->submitted_at ?? '-' }}

                </div>

                <div>

                    <strong>Completed At</strong><br>

                    {{ $request->completed_at ?? '-' }}

                </div>

                <div>

                    <strong>Current Position</strong><br>

                    {{ $request->current_position_id ?? '-' }}

                </div>

            </div>

        </div>

    </div>

    {{-- REQUEST COMMENTS --}}

    <div class="workflow-card">

        <div class="workflow-card-header">
            Request Comments
        </div>

        <div class="workflow-card-body">

            {{ $request->comments ?: 'No comments provided.' }}

        </div>

    </div>

    {{-- APPROVAL HISTORY --}}

    <div class="workflow-card">

        <div class="workflow-card-header">
            Approval History
        </div>

        <div class="workflow-card-body">

            <table class="workflow-table">

                <thead>

                    <tr>

                        <th>Date</th>
                        <th>User</th>
                        <th>Action</th>
                        <th>Comments</th>

                    </tr>

                </thead>

                <tbody>

                @forelse($actions as $action)

                    <tr>

                        <td>

                            {{ $action->action_at }}

                        </td>

                        <td>

                            {{ $action->action_by_name ?? '-' }}

                        </td>

                        <td>

                            {{ $action->action_type }}

                        </td>

                        <td>

                            {{ $action->comments ?: '-' }}

                        </td>

                    </tr>

                @empty

                    <tr>

                        <td colspan="4"
                            style="text-align:center;">

                            No actions recorded.

                        </td>

                    </tr>

                @endforelse

                </tbody>

            </table>

        </div>

    </div>

    {{-- APPROVAL DECISION --}}

    @if($request->status === 'PENDING')

    <div class="workflow-card">

        <div class="workflow-card-header">
            Approval Decision
        </div>

        <div class="workflow-card-body">

            <form method="POST">

                @csrf

                <div class="workflow-form-group">

                    <label>Decision Comments</label>

                    <textarea
                        name="comments"
                        rows="4"></textarea>

                </div>

                <div class="workflow-actions">

                    <button
                        type="submit"
                        formaction="{{ route('workflow.approve', $request->id) }}"
                        class="workflow-btn workflow-btn-success">

                        Approve

                    </button>

                    <button
                        type="submit"
                        formaction="{{ route('workflow.reject', $request->id) }}"
                        class="workflow-btn workflow-btn-danger">

                        Reject

                    </button>

                    <button
                        type="submit"
                        formaction="{{ route('workflow.return', $request->id) }}"
                        class="workflow-btn workflow-btn-warning">

                        Return

                    </button>

                </div>

            </form>

        </div>

    </div>

    @endif

</div>

@endsection