@extends('dashboard.admin.layouts.master')

@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Approval Details</h1>
                </div>
                <a href="{{ route('admin.dashboard.hr.requests.approvals.index') }}" class="btn btn-sm btn-light">Back</a>
            </div>
        </div>

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                <div class="card mb-7">
                    <div class="card-body">
                        <div class="row g-5">
                            <div class="col-md-3">
                                <label class="form-label text-muted">Request Type</label>
                                <div>{{ ucfirst(str_replace('_', ' ', $approval->request_type)) }}</div>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label text-muted">Requester</label>
                                <div>{{ $approval->requesterEmployee?->code ?? '-' }} - {{ $approval->requesterEmployee?->name ?? '-' }}</div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label text-muted">Status</label>
                                <div><span class="badge badge-light-info">{{ ucfirst($approval->status) }}</span></div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label text-muted">Current Step</label>
                                <div>{{ $approval->current_sequence_order ?? '-' }}</div>
                            </div>
                            <div class="col-md-2">
                                <label class="form-label text-muted">Submitted</label>
                                <div>{{ optional($approval->submitted_at)->format('Y-m-d H:i') ?: '-' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                @if($requestRecord)
                    <div class="card mb-7">
                        <div class="card-header border-0 pt-6">
                            <div class="card-title">
                                <h3 class="card-label">Request Snapshot</h3>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <div class="row g-5">
                                <div class="col-md-3">
                                    <label class="form-label text-muted">Request Code</label>
                                    <div>{{ $requestRecord->request_code ?? '-' }}</div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label text-muted">Employee</label>
                                    <div>{{ $requestRecord->employee?->code ?? '-' }} - {{ $requestRecord->employee?->name ?? '-' }}</div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label text-muted">Branch</label>
                                    <div>{{ $requestRecord->branch?->name ?? '-' }}</div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label text-muted">Request Status</label>
                                    <div>{{ ucfirst($requestRecord->status ?? '-') }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif

                <div class="card mb-7">
                    <div class="card-header border-0 pt-6">
                        <div class="card-title">
                            <h3 class="card-label">Approval Steps</h3>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="table-responsive">
                            <table class="table align-middle table-row-dashed fs-6 gy-5">
                                <thead>
                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                    <th>Sequence</th>
                                    <th>Status</th>
                                    <th>Approver</th>
                                    <th>Acted By</th>
                                    <th>Acted At</th>
                                    <th>Notes</th>
                                </tr>
                                </thead>
                                <tbody class="text-gray-600 fw-semibold">
                                @foreach($approval->steps as $step)
                                    <tr>
                                        <td>{{ $step->sequence_order }}</td>
                                        <td><span class="badge badge-light-info">{{ ucfirst($step->status) }}</span></td>
                                        <td>{{ $step->approverEmployee?->name ?? ($step->role?->name ?? ucfirst($step->approval_type)) }}</td>
                                        <td>{{ $step->actorAdmin?->name ?? '-' }}</td>
                                        <td>{{ optional($step->acted_at)->format('Y-m-d H:i') ?: '-' }}</td>
                                        <td>{{ $step->action_notes ?: '-' }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                @if($approval->status === 'pending')
                    <div class="card">
                        <div class="card-header border-0 pt-6">
                            <div class="card-title">
                                <h3 class="card-label">Approval Action</h3>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <form action="{{ route('admin.dashboard.hr.requests.approvals.update', $approval) }}" method="POST" class="row g-5">
                                @csrf
                                @method('PUT')
                                <div class="col-md-3">
                                    <label class="required form-label">Action</label>
                                    <select name="action" class="form-select @error('action') is-invalid @enderror" required>
                                        <option value="approve">Approve</option>
                                        <option value="reject">Reject</option>
                                    </select>
                                    @error('action')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-md-9">
                                    <label class="form-label">Notes</label>
                                    <textarea name="action_notes" class="form-control @error('action_notes') is-invalid @enderror" rows="3">{{ old('action_notes') }}</textarea>
                                    @error('action_notes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                </div>
                                <div class="col-12 d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary">Submit Action</button>
                                </div>
                            </form>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection