@extends('layouts.app')

@section('title', 'Take Action — Instance #' . $instance->instance_id)

@php
    /**
     * Defensive date formatter.
     * Accepts Carbon, string, or null; returns formatted or '—'.
     */
    $fmtDate = function ($value, string $format = 'M j, Y H:i') {
        if (empty($value)) return '—';

        try {
            return \Illuminate\Support\Carbon::parse($value)->format($format);
        } catch (\Throwable $e) {
            return (string) $value;
        }
    };
@endphp

@section('content')
<div class="container-fluid">

    {{-- ─── Flash / errors ──────────────────────────────────── --}}
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show">
            <i class="fas fa-exclamation-circle mr-1"></i> {!! session('error') !!}
            <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show">
            <ul class="mb-0">
                @foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
    @endif

    <div class="row">
        <div class="col-lg-8 offset-lg-2">

            {{-- Role / Delegation badge --}}
            <div class="mb-3">
                <span class="badge badge-primary p-2">
                    <i class="fas fa-user-tag"></i>
                    Your Role:
                    {{ auth()->user()->role?->display_name ?? auth()->user()->role?->name ?? 'Unknown' }}
                </span>
                @if($delegation)
                    <span class="badge badge-warning p-2 ml-2">
                        <i class="fas fa-user-clock"></i>
                        Acting on delegation #{{ $delegation->delegation_id }}
                    </span>
                @endif
            </div>

            {{-- Progress --}}
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-line mr-1"></i> Approval Progress
                    </h5>
                </div>
                <div class="card-body">
                    <div class="progress mb-2" style="height: 25px;">
                        <div class="progress-bar progress-bar-striped bg-success"
                             style="width: {{ $totalSteps > 0 ? ($actionsTaken / $totalSteps) * 100 : 0 }}%">
                            {{ $actionsTaken }}/{{ $totalSteps }} Steps Completed
                        </div>
                    </div>
                    <div class="d-flex justify-content-between small text-muted">
                        <span>Initiated: {{ $fmtDate($instance->initiated_at, 'M j, Y') }}</span>
                        <span>Current Step: {{ $currentStep->step_name }}</span>
                        <span>Total Steps: {{ $totalSteps }}</span>
                    </div>
                </div>
            </div>

            {{-- Main card --}}
            <div class="card shadow">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-check-circle mr-1"></i> Take Approval Action
                    </h4>
                    <small class="text-white-50">
                        Step {{ $currentStep->step_order }}: {{ $currentStep->step_name }}
                    </small>
                </div>

                <div class="card-body">

                    @if(!$canApprove)
                        <div class="alert alert-danger">
                            <i class="fas fa-exclamation-triangle mr-1"></i>
                            You are not authorized to approve this step.
                        </div>
                    @endif

                    {{-- Instance summary --}}
                    <div class="bg-light p-3 rounded mb-4">
                        <h5 class="border-bottom pb-2">Document Information</h5>
                        <div class="row">
                            <div class="col-md-6">
                                <p class="mb-1">
                                    <strong>Document:</strong>
                                    {{ $instance->record_number ?: '#' . $instance->record_id }}
                                </p>
                                <p class="mb-1">
                                    <strong>Title:</strong>
                                    {{ $instance->record_title ?: 'N/A' }}
                                </p>
                                <p class="mb-1">
                                    <strong>Type:</strong> {{ $instance->record_type }}
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p class="mb-1">
                                    <strong>Workflow:</strong>
                                    {{ $instance->workflow?->workflow_name ?? '—' }}
                                </p>
                                <p class="mb-1">
                                    <strong>Initiator:</strong>
                                    {{ $instance->initiator?->name ?? '—' }}
                                </p>
                                <p class="mb-1">
                                    <strong>Initiated:</strong>
                                    {{ $fmtDate($instance->initiated_at) }}
                                </p>
                            </div>
                        </div>
                    </div>

                    {{-- Previous actions ─────────────────────────── --}}
                    @if($actions->isNotEmpty())
                        <div class="bg-light p-3 rounded mb-4">
                            <h5 class="border-bottom pb-2">Previous Actions</h5>
                            @foreach($actions as $action)
                                <div class="media mb-3 pb-2 border-bottom">
                                    <div class="mr-3">
                                        <span class="badge badge-{{ $action->action === 'APPROVE' ? 'success' : 'danger' }} p-2">
                                            <i class="fas fa-{{ $action->action === 'APPROVE' ? 'check' : 'times' }}"></i>
                                        </span>
                                    </div>
                                    <div class="media-body">
                                        <div class="d-flex justify-content-between">
                                            <strong>{{ $action->approver?->name ?? 'Unknown' }}</strong>
                                            <small class="text-muted">
                                                {{-- line 126 lives here — now using $fmtDate --}}
                                                {{ $fmtDate($action->action_date) }}
                                            </small>
                                        </div>
                                        @if($action->step?->step_name)
                                            <div class="small text-muted">
                                                Step {{ $action->step->step_order }}: {{ $action->step->step_name }}
                                            </div>
                                        @endif
                                        @if($action->comment)
                                            <p class="mb-1 mt-1">{{ $action->comment }}</p>
                                        @endif
                                        @if($action->signature)
                                            <div class="mt-1 small text-muted">
                                                <i class="fas fa-signature"></i> Signed: {{ $action->signature }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    {{-- Action form ──────────────────────────────── --}}
                    @if($canApprove)
                        <form method="POST"
                              action="{{ route('workflows.approvals.act', $instance->instance_id) }}"
                              enctype="multipart/form-data"
                              id="approvalForm">
                            @csrf

                            <div class="form-group">
                                <label class="font-weight-bold">
                                    Your Decision <span class="text-danger">*</span>
                                </label>
                                <select name="action_type"
                                        class="form-control form-control-lg"
                                        required>
                                    <option value="">-- Select Action --</option>
                                    <option value="APPROVE">✅ Approve</option>
                                    @if($currentStep->allow_rejection)
                                        <option value="REJECT">❌ Reject</option>
                                    @endif
                                </select>
                            </div>

                            <div class="form-group">
                                <label class="font-weight-bold">
                                    Comments {{ $currentStep->allow_comments ? '*' : '' }}
                                </label>
                                <textarea name="comments"
                                          class="form-control"
                                          rows="4"
                                          {{ $currentStep->allow_comments ? 'required' : '' }}
                                          placeholder="Enter your comments or justification..."></textarea>
                            </div>

                            @if($currentStep->require_esignature)
                                <div class="form-group">
                                    <label class="font-weight-bold">Electronic Signature *</label>

                                    @if($userSignature)
                                        <div class="alert alert-info p-3">
                                            <p class="mb-2">
                                                <i class="fas fa-info-circle"></i>
                                                Your stored signature will be used:
                                            </p>
                                            <img src="{{ asset($userSignature) }}"
                                                 alt="Signature"
                                                 style="max-height: 60px; border: 1px solid #ddd; padding: 5px;">
                                            <div class="mt-2">
                                                <label class="text-muted">
                                                    <input type="checkbox"
                                                           name="use_stored_signature"
                                                           value="1"
                                                           checked>
                                                    Use stored signature
                                                </label>
                                            </div>
                                        </div>
                                    @endif

                                    <input type="text"
                                           name="typed_signature"
                                           class="form-control"
                                           placeholder="Type your full name as electronic signature"
                                           value="{{ $userFullName }}">
                                    <small class="text-muted">
                                        By typing your name, you are electronically signing this document.
                                    </small>
                                </div>
                            @endif

                            @if($currentStep->allow_attachments)
                                <div class="form-group">
                                    <label class="font-weight-bold">Attachments</label>
                                    <input type="file"
                                           name="attachments[]"
                                           class="form-control-file"
                                           multiple>
                                    <small class="text-muted">
                                        Max 10MB per file. PDF, Office docs, images, zip.
                                    </small>
                                </div>
                            @endif

                            <div class="form-group mt-4">
                                <button type="submit"
                                        name="submit_action"
                                        class="btn btn-success btn-lg btn-block"
                                        id="submitBtn">
                                    <i class="fas fa-paper-plane mr-1"></i> Submit Decision
                                </button>
                                <a href="{{ route('workflows.approvals.show', $instance->instance_id) }}"
                                   class="btn btn-secondary btn-block">
                                    <i class="fas fa-times mr-1"></i> Cancel
                                </a>
                            </div>
                        </form>
                    @endif
                </div>
            </div>

            {{-- Step requirements ────────────────────────────── --}}
            <div class="card mt-3">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle mr-1"></i> Step Requirements
                    </h5>
                </div>
                <div class="card-body py-2">
                    <div class="row">
                        <div class="col-md-3">
                            <span class="badge badge-{{ $currentStep->is_required ? 'success' : 'secondary' }} p-2">
                                Required: {{ $currentStep->is_required ? 'Yes' : 'No' }}
                            </span>
                        </div>
                        <div class="col-md-3">
                            <span class="badge badge-{{ $currentStep->allow_delegation ? 'info' : 'secondary' }} p-2">
                                Delegation: {{ $currentStep->allow_delegation ? 'Allowed' : 'Not Allowed' }}
                            </span>
                        </div>
                        <div class="col-md-3">
                            <span class="badge badge-{{ $currentStep->allow_comments ? 'info' : 'secondary' }} p-2">
                                Comments: {{ $currentStep->allow_comments ? 'Required' : 'Optional' }}
                            </span>
                        </div>
                        <div class="col-md-3">
                            <span class="badge badge-{{ $currentStep->require_esignature ? 'warning' : 'secondary' }} p-2">
                                E-Signature: {{ $currentStep->require_esignature ? 'Required' : 'Optional' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('approvalForm');
    if (!form) return;

    form.addEventListener('submit', function (e) {
        const action   = form.querySelector('[name="action_type"]').value;
        const comments = form.querySelector('[name="comments"]')?.value ?? '';

        if (!action) {
            alert('Please select an action (Approve/Reject)');
            e.preventDefault();
            return false;
        }

        @if($currentStep->allow_comments)
        if (!comments.trim()) {
            alert('Please provide comments for your decision');
            e.preventDefault();
            return false;
        }
        @endif

        const btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Processing...';
    });
});
</script>
@endpush