@if (isset($resignation->histories) && count($resignation->histories) > 0)
    <div class="timeline">
        @foreach ($resignation->histories as $history)
            @if ($history->status == 'Reporting Manager Approved')
                <div class="timeline-item mb-4">
                    <div class="timeline-marker bg-primary">
                    </div>
                    <div class="timeline-content p-3 rounded shadow-sm border">
                        <h6 class="fw-bold mb-2">
                            <i class="fa fa-user me-2 text-primary"></i>
                            Reporting Manager ({{ $history->createdBy->name ?? '-' }})
                        </h6>

                        <p class="mb-1"><strong>Status:</strong> {{ $history->status }}</p>
                        <p class="mb-1"><strong>Remark:</strong> {{ $history->remark }}</p>
                        <p class="mb-0">
                            <strong>Action On:</strong>
                            {{ $history->created_at->format('d-m-Y h:i:s A') }}
                        </p>
                    </div>
                </div>
            @elseif ($history->status == 'Reporting Manager Rejected')
                <div class="timeline-item mb-4">
                    <div class="timeline-marker bg-danger">
                    </div>
                    <div class="timeline-content p-3 rounded shadow-sm border">
                        <h6 class="fw-bold mb-2">
                            <i class="fa fa-user me-2 text-danger"></i>
                            Reporting Manager ({{ $history->createdBy->name ?? '-' }})
                        </h6>

                        <p class="mb-1"><strong>Status:</strong> {{ $history->status }}</p>
                        <p class="mb-1"><strong>Remark:</strong> {{ $history->remark }}</p>
                        <p class="mb-0">
                            <strong>Action On:</strong>
                            {{ $history->created_at->format('d-m-Y h:i:s A') }}
                        </p>
                    </div>
                </div>
            @elseif ($history->status == 'Head Manager Accepted')
                <div class="timeline-item mb-4">
                    <div class="timeline-marker bg-success"></div>
                    <div class="timeline-content p-3 rounded shadow-sm border d-flex justify-content-between">
                        <div class="content">
                            <h6 class="fw-bold mb-2">
                                <i class="fa fa-user-tie me-2 text-success"></i>
                                Head Manager ({{ $history->createdBy->name ?? '-' }})
                            </h6>

                            <p class="mb-1"><strong>Status:</strong> {{ $history->status }}</p>
                            <p class="mb-1"><strong>Remark:</strong> {{ $history->remark }}</p>
                            <p class="mb-1">
                                <strong>Action On:</strong>
                                {{ $history->created_at->format('d-m-Y h:i:s A') }}
                            </p>

                            @if (isset($resignation->otherAmounts) && count($resignation->otherAmounts) > 0)
                                <strong>Recovery Amount:</strong>
                                <table class="table table-sm table-bordered mt-1 mb-0 w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Title</th>
                                            <th>Amount (<i class="fa fa-indian-rupee-sign ml-0"
                                                    style="font-size: 12px;"></i>)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php
                                            $totalAmount = 0;
                                        @endphp

                                        @foreach ($resignation->otherAmounts as $otherAmount)
                                            @php
                                                $totalAmount += $otherAmount->amount ?? 0;
                                            @endphp
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $otherAmount->title ?? '' }}</td>
                                                <td class="text-right">
                                                    {{ number_format($otherAmount->amount ?? 0, 2) }}
                                                </td>
                                            </tr>
                                        @endforeach

                                        <tr>
                                            <th colspan="2">Total Amount</th>
                                            <th class="text-right">{{ number_format($totalAmount, 2) }}
                                            </th>
                                        </tr>
                                    </tbody>
                                </table>
                            @endif
                        </div>
                        <div class="buttons">
                            @if ($history->created_by == auth()->id() && $resignation->status != 'Account Approved')
                                <a href="javascript:void(0);" title="Edit" class="edit-history-btn"
                                    data-status="Head Manager Accepted" data-id="{{ $history->id }}">
                                    <i class="fa fa-edit"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @elseif ($history->status == 'Head Manager Rejected')
                <div class="timeline-item mb-4">
                    <div class="timeline-marker bg-danger"></div>
                    <div class="timeline-content p-3 rounded shadow-sm border">
                        <h6 class="fw-bold mb-2">
                            <i class="fa fa-user-tie me-2 text-danger"></i>
                            Head Manager ({{ $history->createdBy->name ?? '-' }})
                        </h6>

                        <p class="mb-1"><strong>Status:</strong> {{ $history->status }}</p>
                        <p class="mb-1"><strong>Remark:</strong> {{ $history->remark }}</p>
                        <p class="mb-3">
                            <strong>Action On:</strong>
                            {{ $history->created_at->format('d-m-Y h:i:s A') }}
                        </p>
                    </div>
                </div>
            @elseif($history->status == 'HR Approved')
                <div class="timeline-item mb-4">
                    <div class="timeline-marker bg-primary">
                    </div>
                    <div class="timeline-content p-3 rounded shadow-sm border d-flex justify-content-between">
                        <div class="content">
                            <h6 class="fw-bold mb-2">
                                <i class="fa fa-user-shield me-2 text-primary"></i>
                                HR Manager ({{ $history->createdBy->name ?? '-' }})
                            </h6>

                            <p class="mb-1"><strong>Status:</strong> {{ $history->status }}</p>
                            <p class="mb-1"><strong>Remark:</strong> {{ $history->remark }}</p>
                            <p class="mb-1">
                                <strong>Action On:</strong>
                                {{ $history->created_at->format('d-m-Y h:i:s A') }}
                            </p>
                            <p class="mb-1">
                                <strong>Salary Amount:</strong>
                                {{ $resignation->salary_amount ? number_format($resignation->salary_amount, 2) : 'N/A' }}
                            </p>
                            <p class="mb-1">
                                <strong>Tentative Full & Final Date:</strong>
                                {{ $resignation->tentative_date ? date('d-m-Y', strtotime($resignation->tentative_date)) : 'N/A' }}
                            </p>
                            <p class="mb-1">
                                <strong>Final Exit Date:</strong>
                                {{ $resignation->final_exit_date ? date('d-m-Y', strtotime($resignation->final_exit_date)) : 'N/A' }}
                            </p>
                            <p class="mb-0">
                                <strong>Take Over By:</strong>
                                {{ $resignation->takeOverBy->employee_name ?? 'N/A' }}
                            </p>
                        </div>
                        <div class="buttons">
                            @if ($history->created_by == auth()->id() && $resignation->status != 'Account Approved')
                                <a href="javascript:void(0);" title="Edit" class="edit-history-btn"
                                    data-status="HR Approved" data-id="{{ $history->id }}">
                                    <i class="fa fa-edit"></i>
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @elseif ($history->status == 'HR Rejected')
                <div class="timeline-item mb-4">
                    <div class="timeline-marker bg-danger"></div>
                    <div class="timeline-content p-3 rounded shadow-sm border">
                        <h6 class="fw-bold mb-2">
                            <i class="fa fa-user-shield me-2 text-danger"></i>
                            HR Manager ({{ $history->createdBy->name ?? '-' }})
                        </h6>

                        <p class="mb-1"><strong>Status:</strong> {{ $history->status }}</p>
                        <p class="mb-1"><strong>Remark:</strong> {{ $history->remark }}</p>
                        <p class="mb-3">
                            <strong>Action On:</strong>
                            {{ $history->created_at->format('d-m-Y h:i:s A') }}
                        </p>
                    </div>
                </div>
            @elseif($history->status == 'Account Approved')
                <div class="timeline-item mb-4">
                    <div class="timeline-marker bg-primary">
                    </div>
                    <div class="timeline-content p-3 rounded shadow-sm border d-flex justify-content-between">
                        <div class="content">
                            <h6 class="fw-bold mb-2">
                                <i class="fa fa-user-check me-2 text-primary"></i>
                                Account Department ({{ $history->createdBy->name ?? '-' }})
                            </h6>

                            <p class="mb-1"><strong>Status:</strong> {{ $history->status }}</p>
                            <p class="mb-1"><strong>Remark:</strong> {{ $history->remark }}</p>
                            <p class="mb-1">
                                <strong>Action On:</strong>
                                {{ $history->created_at->format('d-m-Y h:i:s A') }}
                            </p>
                            <p class="mb-1">
                                <strong>Tentative Full & Final Date:</strong>
                                {{ $resignation->tentative_date ? date('d-m-Y', strtotime($resignation->tentative_date)) : 'N/A' }}
                            </p>
                            <p class="mb-1">
                                <strong>Final Exit Date:</strong>
                                {{ $resignation->final_exit_date ? date('d-m-Y', strtotime($resignation->final_exit_date)) : 'N/A' }}
                            </p>
                            <p class="mb-1">
                                <strong>Final F&F Date:</strong>
                                {{ $resignation->final_f_and_f_date ? date('d-m-Y', strtotime($resignation->final_f_and_f_date)) : 'N/A' }}
                            </p>
                            <p class="mb-1">
                                <strong>Payment Mode:</strong>
                                {{ $resignation->payment_mode ?? 'N/A' }}
                            </p>

                            <div class="modern-ff-container mt-3">
                                <div class="modern-ff-box">
                                    <div class="modern-title">Total Recovery</div>

                                    @if (isset($resignation->otherAmounts))
                                        @foreach ($resignation->otherAmounts as $otherAmount)
                                            <div class="modern-row">
                                                <span>{{ $otherAmount->title }}</span>
                                                <strong>{{ number_format($otherAmount->amount ?? 0, 2) }}</strong>
                                            </div>
                                        @endforeach
                                    @endif

                                    @if (isset($resignation->otherAmounts) && count($resignation->otherAmounts) > 0)
                                        <div class="modern-row">
                                            <span>Actual Recovery</span>
                                            <strong>{{ number_format($resignation->actual_recovery ?? 0, 2) }}</strong>
                                        </div>

                                        <div class="modern-row">
                                            <span>Remaining Recovery</span>
                                            <strong>{{ number_format($resignation->remaining_recovery ?? 0, 2) }}</strong>
                                        </div>
                                    @else
                                        <div class="modern-row">
                                            <span class="text-muted">No any recovery is pending.</span>
                                        </div>
                                    @endif
                                </div>

                                <!-- Other Deduction -->
                                <div class="modern-ff-box">
                                    <div class="modern-title">Other Deduction</div>

                                    <div class="modern-row">
                                        <span>Deduction</span>
                                        <strong>{{ number_format($resignation->other_deduction ?? 0, 2) }}</strong>
                                    </div>
                                </div>

                                <!-- Final Settlement -->
                                <div class="modern-ff-box">
                                    <div class="modern-title">Final Settlement</div>

                                    <div class="modern-row">
                                        <span>Salary</span>
                                        <strong>{{ number_format($resignation->salary_amount ?? 0, 2) }}</strong>
                                    </div>

                                    <div class="modern-row">
                                        <span>Remaining Recovery</span>
                                        <strong>-
                                            {{ number_format($resignation->remaining_recovery ?? 0, 2) }}</strong>
                                    </div>

                                    <div class="modern-row">
                                        <span>Other Deduction</span>
                                        <strong>-
                                            {{ number_format($resignation->other_deduction ?? 0, 2) }}</strong>
                                    </div>

                                    <div class="modern-row final-row">
                                        <span>F&F Amount</span>
                                        <strong>{{ number_format($resignation->final_amount ?? 0, 2) }}</strong>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    </div>
@else
    <div class="row">
        <div class="col-md-12">
            <span class="text-muted">Timeline data not found!</span>
        </div>
    </div>
@endif