@extends('layouts.app')

@section('title', 'Approvals')

@section('content')
<x-breadcrumb :items="[['label' => 'Approvals']]" />

<x-page-header title="Approval Inbox" subtitle="Review pending requests and completed decisions." />

<ul class="nav nav-tabs mb-3" style="border-bottom:1px solid #e2e8f0;">
    <li class="nav-item">
        <a class="nav-link {{ request('tab', 'pending') !== 'completed' ? 'active' : '' }}"
           href="{{ route('approvals.index', ['tab' => 'pending']) }}">Pending</a>
    </li>
    <li class="nav-item">
        <a class="nav-link {{ request('tab') === 'completed' ? 'active' : '' }}"
           href="{{ route('approvals.index', ['tab' => 'completed']) }}">Completed</a>
    </li>
</ul>

<div class="procure-filters">
    <form method="GET" action="{{ route('approvals.index') }}" class="row align-items-end">
        <input type="hidden" name="tab" value="{{ request('tab', 'pending') }}">
        <div class="col-md-4 mb-2">
            <label class="small text-muted">Request Type</label>
            <select name="request_type" class="form-control form-control-sm" style="border-radius:8px;">
                <option value="">All types</option>
                @foreach(['purchase_order','procurement_request','invoice','contract'] as $type)
                    <option value="{{ $type }}" @selected(request('request_type') === $type)>
                        {{ ucfirst(str_replace('_', ' ', $type)) }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4 mb-2">
            <label class="small text-muted">Status</label>
            <select name="status" class="form-control form-control-sm" style="border-radius:8px;">
                <option value="">All</option>
                @foreach(['pending','approved','rejected','returned'] as $st)
                    <option value="{{ $st }}" @selected(request('status') === $st)>{{ ucfirst($st) }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-4 mb-2">
            <button type="submit" class="procure-btn w-100"><i class="fas fa-filter"></i> Filter</button>
        </div>
    </form>
</div>

@if(($approvals ?? collect())->isEmpty())
    <div class="chart-card">
        <div class="chart-card-body">
            <x-empty-state
                icon="fas fa-inbox"
                title="Inbox empty"
                message="{{ request('tab') === 'completed' ? 'No completed approvals yet.' : 'No pending approvals assigned to you.' }}" />
        </div>
    </div>
@else
    <div class="chart-card">
        <div class="chart-card-body" style="overflow-x:auto;">
            <table class="procure-table">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Request ID</th>
                        <th>Requester</th>
                        <th>Role / Approver</th>
                        <th>Due</th>
                        <th>Status</th>
                        <th class="text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($approvals as $approval)
                        <tr>
                            <td>{{ ucfirst(str_replace('_', ' ', $approval->request_type ?? '')) }}</td>
                            <td>
                                <a href="{{ route('approvals.show', $approval) }}" class="font-weight-bold" style="color:#1e293b;">
                                    #{{ $approval->request_id }}
                                </a>
                            </td>
                            <td>{{ $approval->requester->name ?? '—' }}</td>
                            <td>
                                {{ $approval->approver->name ?? ucfirst(str_replace('_', ' ', $approval->approver_role ?? '—')) }}
                            </td>
                            <td>{{ optional($approval->due_at)->format('Y-m-d H:i') ?? '—' }}</td>
                            <td><x-status-badge :status="$approval->status" /></td>
                            <td class="text-right text-nowrap">
                                <a href="{{ route('approvals.show', $approval) }}" class="procure-btn" title="View"><i class="fas fa-eye"></i></a>
                                @if($approval->status === 'pending')
                                    <button type="button" class="procure-btn text-success" title="Approve"
                                        data-toggle="modal" data-target="#approveModal{{ $approval->id }}">
                                        <i class="fas fa-check"></i>
                                    </button>
                                    <button type="button" class="procure-btn text-danger" title="Reject"
                                        data-toggle="modal" data-target="#rejectModal{{ $approval->id }}">
                                        <i class="fas fa-times"></i>
                                    </button>
                                    <button type="button" class="procure-btn" title="Return"
                                        data-toggle="modal" data-target="#returnModal{{ $approval->id }}">
                                        <i class="fas fa-undo"></i>
                                    </button>
                                @endif
                            </td>
                        </tr>

                        @if($approval->status === 'pending')
                            {{-- Approve --}}
                            <div class="modal fade" id="approveModal{{ $approval->id }}" 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">
                                            <p class="text-muted">Approve #{{ $approval->request_id }} ({{ str_replace('_', ' ', $approval->request_type) }}).</p>
                                            <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>
                            {{-- Reject --}}
                            <div class="modal fade" id="rejectModal{{ $approval->id }}" 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>
                            {{-- Return --}}
                            <div class="modal fade" id="returnModal{{ $approval->id }}" 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
                    @endforeach
                </tbody>
            </table>
        </div>
        @if(method_exists($approvals, 'links'))
            <div class="px-3 pb-3">{{ $approvals->withQueryString()->links() }}</div>
        @endif
    </div>
@endif
@endsection