@extends('root')

@section('title', 'Campaign Report - ' . $campaign->template_name)

@push('styles')
<style>
    .campaign-header {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 16px;
        color: white;
        padding: 2rem;
        margin-bottom: 1.5rem;
    }
    .campaign-title {
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }
    .campaign-meta {
        opacity: 0.9;
        font-size: 0.9rem;
    }
    .status-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
    }
    .status-completed { background: rgba(255,255,255,0.2); }
    .status-running { background: #fbbf24; color: #000; }
    .status-failed { background: #ef4444; }
    .status-scheduled { background: #3b82f6; }
    .status-draft { background: #9ca3af; }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    .stat-card {
        background: #fff;
        border-radius: 12px;
        padding: 1.25rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        text-align: center;
    }
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
    }
    .stat-label {
        color: #666;
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }
    .stat-card.sent .stat-value { color: #10b981; }
    .stat-card.delivered .stat-value { color: #3b82f6; }
    .stat-card.read .stat-value { color: #8b5cf6; }
    .stat-card.failed .stat-value { color: #ef4444; }
    .stat-card.cost .stat-value { color: #f59e0b; }
    
    .logs-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        overflow: hidden;
    }
    .logs-header {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .logs-table {
        width: 100%;
        border-collapse: collapse;
    }
    .logs-table th, .logs-table td {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #f0f0f0;
    }
    .logs-table th {
        background: #f8f9fa;
        font-weight: 600;
        font-size: 0.85rem;
        color: #666;
    }
    .badge-sent { background: #d1fae5; color: #065f46; }
    .badge-delivered { background: #dbeafe; color: #1e40af; }
    .badge-read { background: #ede9fe; color: #5b21b6; }
    .badge-failed { background: #fee2e2; color: #991b1b; }
    .badge-pending { background: #fef3c7; color: #92400e; }
    
    .progress-bar-container {
        background: #e5e7eb;
        border-radius: 8px;
        height: 8px;
        overflow: hidden;
        margin-bottom: 0.5rem;
    }
    .progress-bar {
        height: 100%;
        border-radius: 8px;
        transition: width 0.3s;
    }
</style>
@endpush

@section('content')
<div class="container-fluid py-4">
    <a href="{{ route('client.campaigns.index') }}" class="text-muted mb-3 d-inline-block">
        <i class="ti ti-arrow-left me-1"></i>Back to Campaigns
    </a>

    <!-- Campaign Header -->
    <div class="campaign-header">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <div class="campaign-title">{{ $campaign->template_name }}</div>
                <div class="campaign-meta">
                    <i class="ti ti-calendar me-1"></i>Created {{ $campaign->created_at->format('d M Y H:i') }}
                    @if($campaign->scheduled_at)
                        &bull; <i class="ti ti-clock me-1"></i>Scheduled {{ $campaign->scheduled_at->format('d M Y H:i') }}
                    @endif
                </div>
            </div>
            <div class="d-flex align-items-center gap-3">
                @if($campaign->status === 'running' && $campaign->failed_count > 0)
                    <button type="button" onclick="retryThisCampaign()" class="btn btn-warning btn-sm text-dark px-3">
                        <i class="ti ti-rotate me-1"></i> Retry Failed
                    </button>
                    <form id="retry-form" action="{{ route('client.campaigns.retry', $campaign->id) }}" method="POST" style="display:none;">
                        @csrf
                    </form>
                @endif
                @if($campaign->status === 'pending' || $campaign->status === 'running')
                    <button type="button" onclick="retryThisCampaign()" class="btn btn-success btn-sm text-white px-3">
                        <i class="ti ti-player-play me-1"></i> Lanjutkan
                    </button>
                @endif
                <span class="status-badge status-{{ $campaign->status }}">{{ ucfirst($campaign->status) }}</span>
            </div>
        </div>
    </div>

    <!-- Statistics Grid -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-value">{{ $campaign->total_targets }}</div>
            <div class="stat-label">Total Targets</div>
        </div>
        <div class="stat-card sent">
            <div class="stat-value">{{ $campaign->sent_count }}</div>
            <div class="stat-label">Sent ({{ $campaign->success_rate }}%)</div>
        </div>
        <div class="stat-card delivered">
            <div class="stat-value">{{ $campaign->delivered_count }}</div>
            <div class="stat-label">Delivered ({{ $campaign->delivery_rate }}%)</div>
        </div>
        <div class="stat-card read">
            <div class="stat-value">{{ $campaign->read_count }}</div>
            <div class="stat-label">Read ({{ $campaign->read_rate }}%)</div>
        </div>
        <div class="stat-card failed">
            <div class="stat-value">{{ $campaign->failed_count }}</div>
            <div class="stat-label">Failed</div>
        </div>
        <div class="stat-card cost">
            <div class="stat-value">Rp {{ number_format($campaign->actual_cost, 0, ',', '.') }}</div>
            <div class="stat-label">Total Cost</div>
        </div>
    </div>

    <!-- Progress Bars -->
    <div class="card card-body mb-4">
        <div class="row">
            <div class="col-md-4">
                <small class="text-muted">Delivery Rate</small>
                <div class="progress-bar-container">
                    <div class="progress-bar bg-primary" style="width: {{ $campaign->delivery_rate }}%"></div>
                </div>
                <strong>{{ $campaign->delivery_rate }}%</strong>
            </div>
            <div class="col-md-4">
                <small class="text-muted">Read Rate</small>
                <div class="progress-bar-container">
                    <div class="progress-bar bg-purple" style="width: {{ $campaign->read_rate }}%; background: #8b5cf6"></div>
                </div>
                <strong>{{ $campaign->read_rate }}%</strong>
            </div>
            <div class="col-md-4">
                <small class="text-muted">Success Rate</small>
                <div class="progress-bar-container">
                    <div class="progress-bar bg-success" style="width: {{ $campaign->success_rate }}%"></div>
                </div>
                <strong>{{ $campaign->success_rate }}%</strong>
            </div>
        </div>
    </div>

    <!-- Campaign Details -->
    <div class="card card-body mb-4">
        <h5 class="mb-3">Campaign Details</h5>
        <div class="row">
            <div class="col-md-4">
                <p><strong>Language:</strong> {{ $campaign->language }}</p>
                <p><strong>Target Type:</strong> {{ ucfirst($campaign->target_type ?? 'Manual') }}</p>
            </div>
            <div class="col-md-4">
                <p><strong>Estimated Cost:</strong> Rp {{ number_format($campaign->estimated_cost, 0, ',', '.') }}</p>
                <p><strong>Actual Cost:</strong> Rp {{ number_format($campaign->actual_cost, 0, ',', '.') }}</p>
            </div>
            <div class="col-md-4">
                <p><strong>Started:</strong> {{ $campaign->started_at?->format('d M Y H:i') ?? '-' }}</p>
                <p><strong>Completed:</strong> {{ $campaign->completed_at?->format('d M Y H:i') ?? '-' }}</p>
            </div>
        </div>
        @if(!empty($campaign->parameters))
            <hr>
            <h6>Template Parameters</h6>
            <div class="d-flex flex-wrap gap-2">
                @foreach($campaign->parameters as $idx => $val)
                    <span class="badge bg-secondary">{{ '{' . ($idx + 1) . '}' }}: {{ $val }}</span>
                @endforeach
            </div>
        @endif
    </div>

    <!-- Logs Table -->
    <div class="logs-card">
        <div class="logs-header">
            <h5 class="mb-0">Delivery Logs</h5>
            <a href="{{ route('client.campaigns.export', $campaign) }}" class="btn btn-outline-primary btn-sm">
                <i class="ti ti-download me-1"></i>Export CSV
            </a>
        </div>
        <div class="table-responsive">
            <table class="logs-table">
                <thead>
                    <tr>
                        <th>Phone Number</th>
                        <th>Contact Name</th>
                        <th>Status</th>
                        <th>Sent</th>
                        <th>Delivered</th>
                        <th>Read</th>
                        <th>Cost</th>
                        <th>Error</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($campaign->logs as $log)
                        <tr>
                            <td><code>{{ $log->phone_number }}</code></td>
                            <td>{{ $log->contact_name ?? '-' }}</td>
                            <td>
                                <span class="badge badge-{{ $log->status }}">{{ ucfirst($log->status) }}</span>
                            </td>
                            <td>{{ $log->sent_at?->format('H:i:s') ?? '-' }}</td>
                            <td>{{ $log->delivered_at?->format('H:i:s') ?? '-' }}</td>
                            <td>{{ $log->read_at?->format('H:i:s') ?? '-' }}</td>
                            <td>Rp {{ number_format($log->status === 'failed' ? 0 : $log->cost, 0, ',', '.') }}</td>
                            <td class="text-danger" style="max-width:200px;overflow:hidden;text-overflow:ellipsis">
                                {{ $log->error_message ?? '-' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">No logs yet</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
function retryThisCampaign() {
    Swal.fire({
        title: 'Retry Confirmation',
        text: "Retry delivery for failed messages?",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, Retry!',
        cancelButtonText: 'Cancel'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '{{ route('client.campaigns.retry', $campaign->id) }}',
                type: 'POST',
                data: { _token: '{{ csrf_token() }}' },
                success: function(res) {
                   Swal.fire('Success', 'Retry started', 'success').then(() => location.reload());
                },
                error: function(e) {
                   Swal.fire('Error', 'Failed to retry', 'error');
                }
            });
        }
    });
}
</script>
@if($campaign->status === 'running')
setTimeout(() => location.reload(), 10000);
@endif
</script>
@endpush