@extends('layouts.app')

@section('content')
<style>
    .timeline {
        position: relative;
        padding-left: 30px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #17479E;
    }

    .timeline-item {
        position: relative;
        margin-bottom: 30px;
    }

    .timeline-marker {
        position: absolute;
        left: -22px;
        top: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid white;
        box-shadow: 0 0 0 3px rgba(23, 71, 158, 0.3);
        background: #17479E;
        color: white;
    }

    .timeline-marker.success {
        background: #28a745;
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);
    }

    .timeline-marker.pending {
        background: #ffc107;
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3);
    }

    .timeline-marker.failed {
        background: #dc3545;
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
    }

    .timeline-content {
        background: white;
        border: 1px solid #e3e6f0;
        border-radius: 8px;
        padding: 20px;
        margin-left: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

    .timeline-content:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        transform: translateX(5px);
    }

    .timeline-content.success {
        border-left: 4px solid #28a745;
    }

    .timeline-content.pending {
        border-left: 4px solid #ffc107;
    }

    .timeline-content.failed {
        border-left: 4px solid #dc3545;
    }

    .timeline-content.info {
        border-left: 4px solid #17479E;
    }

    .timeline-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .timeline-header h6 {
        flex: 1;
        margin: 0;
        color: #333;
        font-weight: 600;
        font-size: 1.1rem;
    }

    .timeline-date {
        color: #17479E;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    .status-badge {
        padding: 0.4rem 0.9rem;
        border-radius: 20px;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }

    .status-success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #28a745;
    }

    .status-pending {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffc107;
    }

    .status-failed {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #dc3545;
    }

    .status-info {
        background: #d1ecf1;
        color: #0c5460;
        border: 1px solid #17a2b8;
    }

    .details-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-top: 15px;
    }

    .detail-item {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .detail-label {
        color: #17479E;
        font-weight: 600;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .detail-value {
        color: #495057;
        font-weight: 500;
        font-size: 1rem;
    }

    .modern-btn {
        background: #17479E;
        color: white;
        border: none;
        border-radius: 8px;
        padding: 0.6rem 1.2rem;
        font-weight: 600;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        cursor: pointer;
    }

    .modern-btn:hover {
        background: #0f3470;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(23, 71, 158, 0.3);
    }

    .details-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1.5rem;
        margin-top: 1rem;
        border: 1px solid #dee2e6;
    }

    @media (max-width: 768px) {
        .timeline {
            padding-left: 20px;
        }

        .timeline-marker {
            left: -15px;
            width: 24px;
            height: 24px;
        }

        .timeline-content {
            margin-left: 15px;
        }

        .details-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<!-- Enhanced Breadcrumb Navigation -->
<div class="card border-0 shadow-sm mb-4" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
    <div class="card-body py-3">
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-2">
                <i class="fas fa-history text-primary fs-5"></i>
                <h5 class="fw-bold mb-0 text-dark">Payment Timeline</h5>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}" class="text-decoration-none">
                            <i class="fas fa-home me-1"></i>Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('payment.accountant.dashboard') }}" class="text-decoration-none">Payments</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <span class="badge" style="background: linear-gradient(135deg, #87CEEB 0%, #17479e 100%); color: white;">
                            Timeline #{{ $payment->id }}
                        </span>
                    </li>
                </ol>
            </nav>
        </div>
    </div>
</div>

<div class="container-fluid py-4">
    <div class="timeline">
        @php
            $timelineEvents = [];

            // 1. Pending/Registered (from enquiry)
            if ($payment->enquiry) {
                $timelineEvents[] = [
                    'type' => 'pending',
                    'date' => $payment->enquiry->created_at,
                    'statusClass' => 'pending',
                    'icon' => 'bx-time',
                    'label' => 'Enquiry Registered',
                    'user' => $payment->enquiry->registeredBy,
                    'details' => ['Enquiry Type' => ucfirst(str_replace('_', ' ', $payment->enquiry->type))]
                ];

                // 2. Assigned (from enquiry)
                if ($payment->enquiry->assignedUsers && $payment->enquiry->assignedUsers->count() > 0) {
                    $assignedUser = $payment->enquiry->assignedUsers->first();
                    $timelineEvents[] = [
                        'type' => 'assigned',
                        'date' => $assignedUser->pivot->created_at ?? $payment->enquiry->created_at,
                        'statusClass' => 'info',
                        'icon' => 'bx-user-check',
                        'label' => 'Enquiry Assigned',
                        'user' => $assignedUser,
                        'assignedBy' => $payment->enquiry->assigner,
                        'details' => []
                    ];
                }
            }

            // 3-6. Payment logs (initiated, approved, rejected, paid)
            foreach ($payment->logs as $log) {
                if ($log->initiated_by) {
                    $timelineEvents[] = [
                        'type' => 'initiated',
                        'date' => $log->created_at,
                        'statusClass' => 'info',
                        'icon' => 'bx-rocket',
                        'label' => 'Payment Initiated',
                        'user' => $log->initiator,
                        'details' => ['Amount' => 'TSh ' . number_format($payment->amount, 2)]
                    ];
                }

                if ($log->approved_by) {
                    $timelineEvents[] = [
                        'type' => 'approved',
                        'date' => $log->created_at,
                        'statusClass' => 'success',
                        'icon' => 'bx-check-double',
                        'label' => 'Payment Approved',
                        'user' => $log->approver,
                        'details' => []
                    ];
                }

                if ($log->rejected_by) {
                    $timelineEvents[] = [
                        'type' => 'rejected',
                        'date' => $log->created_at,
                        'statusClass' => 'failed',
                        'icon' => 'bx-x',
                        'label' => 'Payment Rejected',
                        'user' => $log->rejector,
                        'details' => []
                    ];
                }

                if ($log->paid_by) {
                    $timelineEvents[] = [
                        'type' => 'paid',
                        'date' => $log->created_at,
                        'statusClass' => 'success',
                        'icon' => 'bx-check',
                        'label' => 'Payment Completed',
                        'user' => $log->payer,
                        'details' => []
                    ];
                }
            }

            // Sort by date
            usort($timelineEvents, function($a, $b) {
                return $a['date'] <=> $b['date'];
            });
        @endphp

        @forelse($timelineEvents as $index => $event)
            <div class="timeline-item">
                <div class="timeline-marker {{ $event['statusClass'] }}">
                    <i class="bx {{ $event['icon'] }}"></i>
                </div>
                <div class="timeline-content {{ $event['statusClass'] }}">
                    <div class="timeline-date">
                        <i class="bx bx-calendar"></i>
                        {{ $event['date']->format('M j, Y \a\t g:i A') }}
                    </div>

                    <div class="timeline-header">
                        <h6>{{ $event['label'] }}</h6>
                        @if ($event['type'] === 'paid')
                            <span class="status-badge status-success">
                                <i class="bx bx-check"></i> Completed
                            </span>
                        @elseif ($event['type'] === 'approved')
                            <span class="status-badge status-success">
                                <i class="bx bx-check-double"></i> Approved
                            </span>
                        @elseif ($event['type'] === 'initiated')
                            <span class="status-badge status-info">
                                <i class="bx bx-rocket"></i> Initiated
                            </span>
                        @elseif ($event['type'] === 'rejected')
                            <span class="status-badge status-failed">
                                <i class="bx bx-x"></i> Rejected
                            </span>
                        @elseif ($event['type'] === 'assigned')
                            <span class="status-badge status-info">
                                <i class="bx bx-user-check"></i> Assigned
                            </span>
                        @elseif ($event['type'] === 'pending')
                            <span class="status-badge status-pending">
                                <i class="bx bx-time"></i> Registered
                            </span>
                        @endif
                    </div>

                    <div class="details-grid">
                        @if(isset($event['user']) && $event['user'])
                            <div class="detail-item">
                                <div class="detail-label">
                                    @if($event['type'] === 'pending') Registered By
                                    @elseif($event['type'] === 'assigned') Assigned To
                                    @elseif($event['type'] === 'initiated') Initiated By
                                    @elseif($event['type'] === 'approved') Approved By
                                    @elseif($event['type'] === 'rejected') Rejected By
                                    @elseif($event['type'] === 'paid') Paid By
                                    @else User
                                    @endif
                                </div>
                                <div class="detail-value">
                                    {{ $event['user']->name }}
                                    @if($event['user']->roles->first())
                                        <small class="text-muted d-block">({{ $event['user']->roles->first()->name }})</small>
                                    @endif
                                </div>
                            </div>
                        @endif

                        @if(isset($event['assignedBy']) && $event['assignedBy'])
                            <div class="detail-item">
                                <div class="detail-label">Assigned By</div>
                                <div class="detail-value">
                                    {{ $event['assignedBy']->name }}
                                    @if($event['assignedBy']->roles->first())
                                        <small class="text-muted d-block">({{ $event['assignedBy']->roles->first()->name }})</small>
                                    @endif
                                </div>
                            </div>
                        @endif

                        @foreach($event['details'] as $key => $value)
                            <div class="detail-item">
                                <div class="detail-label">{{ $key }}</div>
                                <div class="detail-value">{{ $value }}</div>
                            </div>
                        @endforeach
                    </div>

                    <button class="modern-btn mt-3"
                            type="button"
                            data-bs-target="#details-{{ $index }}"
                            data-bs-toggle="collapse">
                        <i class="bx bx-detail"></i>
                        Show Details
                    </button>

                    <div class="collapse" id="details-{{ $index }}">
                        <div class="details-section">
                            <div class="details-grid">
                                <div class="detail-item">
                                    <div class="detail-label">Full Timestamp</div>
                                    <div class="detail-value">{{ $event['date']->format('Y-m-d H:i:s T') }}</div>
                                </div>
                                <div class="detail-item">
                                    <div class="detail-label">Event Type</div>
                                    <div class="detail-value">{{ ucfirst($event['type']) }}</div>
                                </div>
                                @if($event['type'] !== 'pending' && $event['type'] !== 'assigned')
                                    <div class="detail-item">
                                        <div class="detail-label">Payment ID</div>
                                        <div class="detail-value">#{{ $payment->id }}</div>
                                    </div>
                                @else
                                    <div class="detail-item">
                                        <div class="detail-label">Enquiry ID</div>
                                        <div class="detail-value">#{{ $payment->enquiry_id }}</div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="alert alert-info">
                <i class="bx bx-info-circle"></i> No timeline events found.
            </div>
        @endforelse
    </div>
</div>

@endsection