@extends('layouts.admin')
@section('title', 'Report Detail')

@section('content')
<div class="d-flex align-items-center mb-4 gap-3">
    <a href="{{ route('admin.reports.index') }}" class="btn btn-outline-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> Back
    </a>
    <div>
        <h4 class="mb-0 fw-bold">Report: {{ $report->server?->name }}</h4>
        <small class="text-muted">{{ $report->backup_date?->format('D, M j, Y') }}</small>
    </div>
    <span class="badge badge-{{ $report->status }} ms-2 fs-6">{{ $report->status_label }}</span>
</div>

<div class="row g-3">
    <!-- Left: Main info -->
    <div class="col-lg-8">

        <!-- Server Info Card -->
        <div class="card mb-3">
            <div class="card-header fw-semibold"><i class="bi bi-server me-1"></i>Server Information</div>
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-sm-6">
                        <label class="text-muted small">Server Name</label>
                        <div class="fw-semibold">{{ $report->server?->name }}</div>
                    </div>
                    <div class="col-sm-6">
                        <label class="text-muted small">Server IP</label>
                        <div><code>{{ $report->server?->server_ip }}</code></div>
                    </div>
                    <div class="col-sm-6">
                        <label class="text-muted small">Backup IP</label>
                        <div><code>{{ $report->backup_ip ?? '—' }}</code></div>
                    </div>
                    <div class="col-sm-6">
                        <label class="text-muted small">Job ID</label>
                        <div><code class="small">{{ $report->job_id ?? '—' }}</code></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Timing Card -->
        <div class="card mb-3">
            <div class="card-header fw-semibold"><i class="bi bi-clock me-1"></i>Backup Timing</div>
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-sm-4">
                        <label class="text-muted small">Start Time</label>
                        <div>{{ $report->backup_start_time?->format('D, M j, Y g:i A') ?? '—' }}</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="text-muted small">End Time</label>
                        <div>{{ $report->backup_end_time?->format('D, M j, Y g:i A') ?? '—' }}</div>
                    </div>
                    <div class="col-sm-4">
                        <label class="text-muted small">Duration</label>
                        <div class="fw-semibold">{{ $report->formatted_duration }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Backup Task Status -->
        <div class="card mb-3">
            <div class="card-header fw-semibold"><i class="bi bi-list-check me-1"></i>Backup Tasks</div>
            <div class="card-body">
                <div class="row g-3">
                    @php
                        $tasks = [
                            ['icon' => 'bi-database', 'label' => 'Database Backup', 'ok' => $report->db_backup_ok],
                            ['icon' => 'bi-envelope',  'label' => 'Email Backup',    'ok' => $report->email_backup_ok],
                            ['icon' => 'bi-house',     'label' => 'Home Backup',     'ok' => $report->home_backup_ok],
                        ];
                    @endphp
                    @foreach($tasks as $task)
                    <div class="col-sm-4">
                        <div class="d-flex align-items-center gap-2 p-3 rounded border
                            {{ is_null($task['ok']) ? '' : ($task['ok'] ? 'border-success bg-success bg-opacity-10' : 'border-danger bg-danger bg-opacity-10') }}">
                            <i class="bi {{ $task['icon'] }} fs-4
                                {{ is_null($task['ok']) ? 'text-muted' : ($task['ok'] ? 'text-success' : 'text-danger') }}"></i>
                            <div>
                                <div class="small fw-semibold">{{ $task['label'] }}</div>
                                <div class="small">
                                    @if(is_null($task['ok']))
                                        <span class="text-muted">Unknown</span>
                                    @elseif($task['ok'])
                                        <span class="text-success"><i class="bi bi-check"></i> OK</span>
                                    @else
                                        <span class="text-danger"><i class="bi bi-x"></i> Failed</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

                @if($report->total_accounts > 0)
                <hr>
                <div class="d-flex gap-4 mt-2">
                    <div>
                        <span class="text-muted small">Total Accounts</span>
                        <div class="fs-5 fw-bold">{{ $report->total_accounts }}</div>
                    </div>
                    <div>
                        <span class="text-muted small">Completed</span>
                        <div class="fs-5 fw-bold text-success">{{ $report->completed_accounts }}</div>
                    </div>
                    <div>
                        <span class="text-muted small">Failed</span>
                        <div class="fs-5 fw-bold text-danger">{{ $report->failed_accounts }}</div>
                    </div>
                </div>
                @endif
            </div>
        </div>

        <!-- Errors -->
        @if($report->errors->count())
        <div class="card mb-3">
            <div class="card-header fw-semibold text-danger">
                <i class="bi bi-exclamation-triangle me-1"></i>Errors ({{ $report->errors->count() }})
            </div>
            <div class="card-body p-0">
                <table class="table table-sm mb-0">
                    <thead class="table-light">
                        <tr><th>Type</th><th>Account</th><th>Message</th></tr>
                    </thead>
                    <tbody>
                        @foreach($report->errors as $err)
                        <tr>
                            <td><span class="badge bg-danger">{{ $err->type_label }}</span></td>
                            <td><code class="small">{{ $err->account ?? '—' }}</code></td>
                            <td class="small">{{ $err->message }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif

    </div>

    <!-- Right: Remarks & Raw JSON -->
    <div class="col-lg-4">
        <div class="card mb-3">
            <div class="card-header fw-semibold"><i class="bi bi-chat-text me-1"></i>Remarks</div>
            <div class="card-body">
                <p class="mb-0 {{ $report->remarks ? '' : 'text-muted' }}">
                    {{ $report->remarks ?? 'No remarks.' }}
                </p>
            </div>
        </div>

        <!-- Raw JSON -->
        @if($report->raw_json)
        <div class="card">
            <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                <span><i class="bi bi-braces me-1"></i>Raw API Response</span>
                <button class="btn btn-sm btn-outline-secondary" type="button"
                        data-bs-toggle="collapse" data-bs-target="#raw-json">
                    <i class="bi bi-chevron-down"></i>
                </button>
            </div>
            <div class="collapse" id="raw-json">
                <div class="card-body p-0">
                    <pre class="mb-0 p-3" style="max-height:400px;overflow:auto;font-size:.78rem">{{ json_encode(json_decode($report->raw_json), JSON_PRETTY_PRINT) }}</pre>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection