@extends('layouts.app')

@section('title', 'Approval Details')

@section('content')
<x-breadcrumb :items="[
    ['label' => 'Approvals', 'url' => route('approvals.index')],
    ['label' => 'Request #'.$approval->request_id],
]" />

<x-page-header
    :title="'Approval · '.ucfirst(str_replace('_', ' ', $approval->request_type ?? '')).' #'.$approval->request_id"
    subtitle="Review request details and take a decision.">
    <x-slot name="actions">
        <a href="{{ route('approvals.index') }}" class="procure-btn"><i class="fas fa-arrow-left"></i> Back</a>
        @if($approval->status === 'pending')
            <button type="button" class="procure-btn-primary" data-toggle="modal" data-target="#approveModal">
                <i class="fas fa-check"></i> Approve
            </button>
            <button type="button" class="procure-btn text-danger" data-toggle="modal" data-target="#rejectModal">
                <i class="fas fa-times"></i> Reject
            </button>
            <button type="button" class="procure-btn" data-toggle="modal" data-target="#returnModal">
                <i class="fas fa-undo"></i> Return
            </button>
        @endif
    </x-slot>
</x-page-header>

<div class="row">
    <div class="col-lg-5 mb-3">
        <div class="procure-form-card h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0 font-weight-bold">Details</h5>
                <x-status-badge :status="$approval->status" />
            </div>
            <p class="procure-detail-label">Request Type</p>
            <p class="procure-detail-value">{{ ucfirst(str_replace('_', ' ', $approval->request_type ?? '')) }}</p>
            <p class="procure-detail-label">Request ID</p>
            <p class="procure-detail-value">#{{ $approval->request_id }}</p>
            <p class="procure-detail-label">Sequence</p>
            <p class="procure-detail-value">Step {{ $approval->sequence_order ?? 1 }}</p>
            <p class="procure-detail-label">Requester</p>
            <p class="procure-detail-value">{{ $approval->requester->name ?? '—' }}</p>
            <p class="procure-detail-label">Approver / Role</p>
            <p class="procure-detail-value">
                {{ $approval->approver->name ?? ucfirst(str_replace('_', ' ', $approval->approver_role ?? '—')) }}
            </p>
            <p class="procure-detail-label">Due At</p>
            <p class="procure-detail-value">{{ optional($approval->due_at)->format('Y-m-d H:i') ?? '—' }}</p>
            @if($approval->decision_comment)
                <p class="procure-detail-label">Decision Comment</p>
                <p class="procure-detail-value">{{ $approval->decision_comment }}</p>
            @endif
            @if($approval->decided_at)
                <p class="procure-detail-label">Decided At</p>
                <p class="procure-detail-value">{{ $approval->decided_at->format('Y-m-d H:i') }}</p>
            @endif
        </div>
    </div>
    <div class="col-lg-7 mb-3">
        <div class="procure-form-card h-100">
            <h5 class="font-weight-bold mb-3">Approval Timeline</h5>
            @if(($history ?? collect())->isEmpty())
                <x-empty-state icon="fas fa-stream" title="No history" message="Workflow steps will appear here." />
            @else
                <ul class="approval-timeline">
                    @foreach($history as $step)
                        <li>
                            <span class="tl-dot" style="border-color: {{ $step->status === 'approved' ? '#16a34a' : ($step->status === 'rejected' ? '#ef4444' : '#2563eb') }};"></span>
                            <div class="d-flex justify-content-between align-items-start flex-wrap">
                                <div>
                                    <strong>Step {{ $step->sequence_order ?? $loop->iteration }}</strong>
                                    <span class="text-muted">· {{ ucfirst(str_replace('_', ' ', $step->approver_role ?? 'approver')) }}</span>
                                    <div class="small text-muted">{{ $step->approver->name ?? $step->requester->name ?? '' }}</div>
                                    @if($step->decision_comment)
                                        <div class="small mt-1">{{ $step->decision_comment }}</div>
                                    @endif
                                </div>
                                <div class="text-right">
                                    <x-status-badge :status="$step->status" />
                                    <div class="small text-muted mt-1">{{ optional($step->decided_at ?? $step->created_at)->format('Y-m-d H:i') }}</div>
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </div>
    </div>
</div>

@if($purchaseOrder)
<div class="chart-card mb-3">
    <div class="chart-card-header"><h3 class="chart-card-title">Pricing Analysis</h3></div>
    <div class="chart-card-body">
        <p class="mb-2"><strong>PO:</strong> {{ $purchaseOrder->po_number }} · <strong>Total:</strong> {{ $purchaseOrder->currency }} {{ number_format((float) $purchaseOrder->total_amount, 2) }}</p>

        <h6 class="font-weight-bold text-muted mt-3">System Price Comparison</h6>
        <div class="row">
            <div class="col-md-4 mb-2">
                <p class="procure-detail-label">Recommended Supplier</p>
                <p class="procure-detail-value">{{ $purchaseOrder->recommendedSupplier->name ?? ($purchaseOrder->pricing_analysis_json['recommended_supplier_name'] ?? '—') }}</p>
            </div>
            <div class="col-md-4 mb-2">
                <p class="procure-detail-label">Selected Supplier</p>
                <p class="procure-detail-value">{{ $purchaseOrder->supplier->name ?? '—' }}</p>
            </div>
            <div class="col-md-4 mb-2">
                <p class="procure-detail-label">Price Difference / Unit</p>
                <p class="procure-detail-value">{{ $purchaseOrder->currency }} {{ number_format((float) ($purchaseOrder->price_difference ?? 0), 2) }}</p>
            </div>
        </div>

        @php $suppliers = $purchaseOrder->pricing_analysis_json['suppliers'] ?? []; @endphp
        @if(!empty($suppliers))
            <table class="procure-table my-3">
                <thead>
                    <tr>
                        <th>Supplier</th>
                        <th>Unit Price</th>
                        <th>Line Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($suppliers as $row)
                        <tr>
                            <td>{{ $row['supplier_name'] ?? '—' }}</td>
                            <td>{{ $purchaseOrder->currency }} {{ number_format((float) ($row['unit_price'] ?? 0), 2) }}</td>
                            <td>{{ $purchaseOrder->currency }} {{ number_format((float) ($row['line_total'] ?? 0), 2) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif

        <p class="procure-detail-label">Estimated Savings / Additional Cost</p>
        <p class="procure-detail-value">{{ $purchaseOrder->currency }} {{ number_format((float) ($purchaseOrder->estimated_savings_lost ?? 0), 2) }}</p>

        @if($purchaseOrder->supplier_selection_reason)
            <p class="procure-detail-label">User’s Reason</p>
            <p class="procure-detail-value">{{ $purchaseOrder->supplier_selection_reason }}</p>
        @endif

        <hr>
        <h6 class="font-weight-bold text-muted">AI Advisory Recommendation</h6>
        <p class="procure-detail-label">Recommendation</p>
        <p class="procure-detail-value">{{ $purchaseOrder->ai_approval_recommendation ? strtoupper($purchaseOrder->ai_approval_recommendation) : 'Not available' }}</p>
        <p class="procure-detail-label">Explanation</p>
        <p class="procure-detail-value">{{ $purchaseOrder->ai_approval_reason ?? '—' }}</p>
        <p class="small text-muted mb-0">AI results are advisory only. The normal approval workflow remains authoritative.</p>
    </div>
</div>
@endif

@if($approval->status === 'pending')
    <div class="modal fade" id="approveModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form method="POST" action="{{ route('approvals.approve', $approval) }}" class="modal-content" style="border-radius:12px;border:none;">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title">Approve Request</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <label class="font-weight-bold">Comment (optional)</label>
                    <textarea name="comment" rows="3" class="form-control" style="border-radius:8px;"></textarea>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius:8px;">Cancel</button>
                    <button type="submit" class="btn btn-success" style="border-radius:8px;">Approve</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="rejectModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form method="POST" action="{{ route('approvals.reject', $approval) }}" class="modal-content" style="border-radius:12px;border:none;">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title">Reject Request</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <label class="font-weight-bold">Reason <span class="text-danger">*</span></label>
                    <textarea name="comment" rows="3" class="form-control" required style="border-radius:8px;"></textarea>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius:8px;">Cancel</button>
                    <button type="submit" class="btn btn-danger" style="border-radius:8px;">Reject</button>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="returnModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form method="POST" action="{{ route('approvals.return', $approval) }}" class="modal-content" style="border-radius:12px;border:none;">
                @csrf
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title">Return for Revision</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <label class="font-weight-bold">Feedback <span class="text-danger">*</span></label>
                    <textarea name="comment" rows="3" class="form-control" required style="border-radius:8px;"></textarea>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" style="border-radius:8px;">Cancel</button>
                    <button type="submit" class="btn btn-warning" style="border-radius:8px;">Return</button>
                </div>
            </form>
        </div>
    </div>
@endif
@endsection