@extends('dashboard.layouts.app')

@section('content')
    <div class="container-fluid px-3">

        <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="fw-bold mb-0">Currency History: {{ $currency->currency }}</div>

            <a href="{{ route('currency.index') }}" class="btn btn-secondary">← Back</a>
        </div>

        <div class="card shadow-sm border-0">
            <div class="card-header">
                <strong>Change Logs</strong>
            </div>

            <div class="card-body">

                @if($logs->isEmpty())
                    <div class="alert alert-info text-center">
                        No history logs found for this currency.
                    </div>
                @else

                    <ul class="timeline">
                        @foreach($logs as $log)
                            <li class="timeline-item mb-5">

                                <div class="fw-bold">{{ $log->created_at->format('Y-m-d H:i') }}</div>

                                <p class=" mb-2">
                                    Updated by:
                                    <strong>{{ $log->editor->full_name ?? 'Unknown' }}</strong>
                                </p>

                                <div class="p-3 border rounded ">
                                    <p class="mb-1">
                                        <strong>Old Rate:</strong>
                                        {{ number_format($log->old_rate, 2) }}
                                    </p>
                                    <p class="mb-1">
                                        <strong>New Rate:</strong>
                                        {{ number_format($log->new_rate, 2) }}
                                    </p>

                                    <p class="mb-1">
                                        <strong>Default Status:</strong>
                                        {{ $log->new_default ? 'Yes (Default)' : 'No' }}
                                    </p>
                                </div>

                            </li>
                        @endforeach
                    </ul>

                @endif

            </div>
        </div>
    </div>

    <style>
        .timeline {
            list-style: none;
            position: relative;
            padding-left: 40px;
        }

        .timeline::before {
            content: '';
            background: #0d6efd;
            width: 3px;
            height: 100%;
            position: absolute;
            left: 18px;
            top: 0;
        }

        .timeline-item {
            position: relative;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -29px;
            top: 5px;
            width: 17px;
            height: 17px;
            background: white;
            border: 3px solid #0d6efd;
            border-radius: 50%;
        }
    </style>
@endsection