@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<style>
    .stats-card {
        background: white;
        border-radius: 16px;
        padding: 24px;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        border: 1px solid #e2e8f0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .stats-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    }

    .stats-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04);
    }

    .stats-card.primary::before {
        background: linear-gradient(90deg, #4f46e5, #7c3aed);
    }

    .stats-card.warning::before {
        background: linear-gradient(90deg, #f59e0b, #f97316);
    }

    .stats-card.success::before {
        background: linear-gradient(90deg, #10b981, #059669);
    }

    .stats-card.info::before {
        background: linear-gradient(90deg, #06b6d4, #0891b2);
    }

    .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 16px;
    }

    .stats-icon.primary {
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        color: white;
    }

    .stats-icon.warning {
        background: linear-gradient(135deg, #f59e0b, #f97316);
        color: white;
    }

    .stats-icon.success {
        background: linear-gradient(135deg, #10b981, #059669);
        color: white;
    }

    .stats-icon.info {
        background: linear-gradient(135deg, #06b6d4, #0891b2);
        color: white;
    }

    .stats-number {
        font-size: 2.5rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 8px;
    }

    .stats-label {
        font-size: 0.875rem;
        font-weight: 500;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .data-card {
        background: white;
        border-radius: 16px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .data-card:hover {
        box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    }

    .card-header-custom {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        padding: 20px 24px;
        border-bottom: 1px solid #e2e8f0;
    }

    .card-header-custom h5 {
        margin: 0;
        font-weight: 600;
        color: #1e293b;
        font-size: 1.125rem;
    }

    .priority-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .priority-high {
        background: linear-gradient(135deg, #fee2e2, #fecaca);
        color: #b91c1c;
    }

    .priority-medium {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #d97706;
    }

    .priority-low {
        background: linear-gradient(135deg, #dbeafe, #bfdbfe);
        color: #1d4ed8;
    }

    .status-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .status-completed {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
        color: #065f46;
    }

    .status-pending {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #92400e;
    }

    .status-in-progress {
        background: linear-gradient(135deg, #dbeafe, #bfdbfe);
        color: #1e40af;
    }

    .progress-custom {
        height: 12px;
        border-radius: 20px;
        background: #f1f5f9;
        overflow: hidden;
        box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.06);
    }

    .progress-bar-custom {
        height: 100%;
        border-radius: 20px;
        background: linear-gradient(90deg, #10b981, #059669);
        transition: width 0.8s ease;
        position: relative;
        overflow: hidden;
    }

    .progress-bar-custom::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: linear-gradient(
            -45deg,
            rgba(255, 255, 255, .2) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, .2) 50%,
            rgba(255, 255, 255, .2) 75%,
            transparent 75%,
            transparent
        );
        background-size: 50px 50px;
        animation: move 2s linear infinite;
    }

    @keyframes move {
        0% {
            background-position: 0 0;
        }
        100% {
            background-position: 50px 50px;
        }
    }

    .progress-bar-warning {
        background: linear-gradient(90deg, #f59e0b, #f97316);
    }

    .progress-bar-danger {
        background: linear-gradient(90deg, #ef4444, #dc2626);
    }

    .table-custom {
        border-collapse: separate;
        border-spacing: 0;
    }

    .table-custom th {
        background: #f8fafc;
        color: #475569;
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 16px;
        border: none;
    }

    .table-custom td {
        padding: 16px;
        border-bottom: 1px solid #e2e8f0;
        vertical-align: middle;
    }

    .table-custom tbody tr {
        transition: all 0.2s ease;
    }

    .table-custom tbody tr:hover {
        background: #f8fafc;
    }

    .btn-modern {
        padding: 8px 16px;
        border-radius: 12px;
        font-weight: 500;
        font-size: 0.875rem;
        transition: all 0.3s ease;
        border: none;
        box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1);
    }

    .btn-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px -2px rgb(0 0 0 / 0.2);
    }

    .btn-info-modern {
        background: linear-gradient(135deg, #06b6d4, #0891b2);
        color: white;
    }

    .btn-info-modern:hover {
        background: linear-gradient(135deg, #0891b2, #0e7490);
        color: white;
    }

    .sla-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    @media (max-width: 768px) {
        .sla-grid {
            grid-template-columns: 1fr;
        }
        
        .stats-number {
            font-size: 2rem;
        }
    }

    .fade-in {
        animation: fadeInUp 0.6s ease-out;
    }

    .fade-in-delay {
        animation: fadeInUp 0.6s ease-out 0.2s both;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .chart-container {
        position: relative;
        height: 300px;
        margin: 20px 0;
    }
</style>

<!-- Welcome Header -->
<div class="mb-4 fade-in">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="h3 mb-1 text-gray-800">Dashboard Overview</h1>
            <p class="text-muted mb-0">Selamat datang di sistem pengaduan keluhan PT Albany</p>
        </div>
        <div class="text-muted">
            <i class="fas fa-calendar-alt me-2"></i>
            {{ date('d F Y') }}
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="row mb-4 fade-in">
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stats-card primary">
            <div class="stats-icon primary">
                <i class="fas fa-exclamation-triangle"></i>
            </div>
            <div class="stats-number">{{ $totalComplaints }}</div>
            <div class="stats-label">Total Keluhan</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stats-card warning">
            <div class="stats-icon warning">
                <i class="fas fa-clock"></i>
            </div>
            <div class="stats-number">{{ $pendingComplaints }}</div>
            <div class="stats-label">Pending</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stats-card success">
            <div class="stats-icon success">
                <i class="fas fa-check-circle"></i>
            </div>
            <div class="stats-number">{{ $completedComplaints }}</div>
            <div class="stats-label">Selesai</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
        <div class="stats-card info">
            <div class="stats-icon info">
                <i class="fas fa-users"></i>
            </div>
            <div class="stats-number">{{ $totalCustomers }}</div>
            <div class="stats-label">Total Pelanggan</div>
        </div>
    </div>
</div>

<!-- Main Content Grid -->
<div class="row fade-in-delay">
    <!-- Priority Complaints -->
    <div class="col-lg-6 mb-4">
        <div class="data-card">
            <div class="card-header-custom d-flex justify-content-between align-items-center">
                <h5>Keluhan Prioritas Tinggi</h5>
                <a href="{{ route('complaints.priority.list') }}" class="btn btn-modern btn-info-modern">
                    <i class="fas fa-eye me-1"></i>Lihat Semua
                </a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-custom mb-0">
                        <thead>
                            <tr>
                                <th width="5%">#</th>
                                <th width="25%">Pelanggan</th>
                                <th width="25%">Kategori</th>
                                <th width="20%">Prioritas</th>
                                <th width="25%">Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($priorityComplaints as $complaint)
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center justify-content-center">
                                        <span class="badge bg-light text-dark">{{ $loop->iteration }}</span>
                                    </div>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="avatar-circle me-2">
                                            <i class="fas fa-user"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold text-dark">{{ $complaint->customer->name }}</div>
                                            <div class="text-muted small">{{ Str::limit($complaint->customer->email ?? 'N/A', 20) }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="priority-badge {{ $complaint->category->weight >= 8 ? 'priority-high' : ($complaint->category->weight >= 5 ? 'priority-medium' : 'priority-low') }}">
                                        {{ $complaint->category->name }}
                                    </span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="me-2">
                                            <div class="priority-score">{{ number_format($complaint->priority_score, 2) }}</div>
                                        </div>
                                        <div class="priority-indicator {{ $complaint->priority_score > 0.7 ? 'high' : ($complaint->priority_score > 0.5 ? 'medium' : 'low') }}"></div>
                                    </div>
                                </td>
                                <td>
                                    <span class="status-badge {{ $complaint->status == 'completed' ? 'status-completed' : ($complaint->status == 'pending' ? 'status-pending' : 'status-in-progress') }}">
                                        {{ ucfirst($complaint->status) }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-5">
                                    <div class="text-muted">
                                        <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                        <p>Tidak ada keluhan prioritas tinggi</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- SLA Performance -->
    <div class="col-lg-6 mb-4">
        <div class="data-card">
            <div class="card-header-custom">
                <h5>Kinerja SLA</h5>
            </div>
            <div class="card-body p-4">
                <div class="sla-grid">
                    <!-- Overall SLA -->
                    <div>
                        <h6 class="text-dark fw-semibold mb-3">Overall SLA Performance</h6>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="text-muted small">Tingkat Kepatuhan</span>
                                <span class="fw-bold text-dark">{{ $slaMetrics['overall']['percentage'] }}%</span>
                            </div>
                            <div class="progress-custom">
                                <div class="progress-bar-custom {{ $slaMetrics['overall']['percentage'] > 90 ? '' : ($slaMetrics['overall']['percentage'] > 70 ? 'progress-bar-warning' : 'progress-bar-danger') }}" 
                                     style="width: {{ $slaMetrics['overall']['percentage'] }}%">
                                </div>
                            </div>
                        </div>
                        <div class="text-muted small">
                            <i class="fas fa-info-circle me-1"></i>
                            {{ $slaMetrics['overall']['met_sla'] }} dari {{ $slaMetrics['overall']['completed'] }} keluhan memenuhi SLA
                        </div>
                    </div>

                    <!-- SLA by Category -->
                    <div>
                        <h6 class="text-dark fw-semibold mb-3">SLA per Kategori</h6>
                        <div style="max-height: 240px; overflow-y: auto;" class="custom-scrollbar">
                            @foreach($slaMetrics['by_category'] as $sla)
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="text-dark small fw-medium">{{ Str::limit($sla['category'], 15) }}</span>
                                    <span class="fw-bold small {{ $sla['percentage'] > 90 ? 'text-success' : ($sla['percentage'] > 70 ? 'text-warning' : 'text-danger') }}">
                                        {{ $sla['percentage'] }}%
                                    </span>
                                </div>
                                <div class="progress-custom" style="height: 8px;">
                                    <div class="progress-bar-custom {{ $sla['percentage'] > 90 ? '' : ($sla['percentage'] > 70 ? 'progress-bar-warning' : 'progress-bar-danger') }}" 
                                         style="width: {{ $sla['percentage'] }}%">
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Additional Insights Row -->
<div class="row fade-in-delay">
    <div class="col-lg-4 mb-4">
        <div class="data-card">
            <div class="card-header-custom">
                <h5>Quick Actions</h5>
            </div>
            <div class="card-body p-4">
                <div class="d-grid gap-3">
                    <a href="{{ route('complaints.create') }}" class="btn btn-modern btn-info-modern">
                        <i class="fas fa-plus me-2"></i>Tambah Keluhan Baru
                    </a>
                    <a href="{{ route('customers.create') }}" class="btn btn-modern" style="background: linear-gradient(135deg, #10b981, #059669); color: white;">
                        <i class="fas fa-user-plus me-2"></i>Tambah Pelanggan
                    </a>
                    <a href="{{ route('reports.sla') }}" class="btn btn-modern" style="background: linear-gradient(135deg, #f59e0b, #f97316); color: white;">
                        <i class="fas fa-chart-bar me-2"></i>Lihat Laporan Detail
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8 mb-4">
        <div class="data-card">
            <div class="card-header-custom">
                <h5>Ringkasan Sistem</h5>
            </div>
            <div class="card-body p-4">
                <div class="row">
                    <div class="col-md-4">
                        <div class="text-center p-3">
                            <div class="stats-icon info mx-auto mb-2" style="width: 50px; height: 50px;">
                                <i class="fas fa-chart-pie"></i>
                            </div>
                            <h6 class="text-dark">Tingkat Penyelesaian</h6>
                            <p class="text-muted mb-0">
                                {{ $totalComplaints > 0 ? number_format(($completedComplaints / $totalComplaints) * 100, 1) : 0 }}%
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-3">
                            <div class="stats-icon success mx-auto mb-2" style="width: 50px; height: 50px;">
                                <i class="fas fa-thumbs-up"></i>
                            </div>
                            <h6 class="text-dark">Kepuasan SLA</h6>
                            <p class="text-muted mb-0">{{ $slaMetrics['overall']['percentage'] }}%</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center p-3">
                            <div class="stats-icon warning mx-auto mb-2" style="width: 50px; height: 50px;">
                                <i class="fas fa-hourglass-half"></i>
                            </div>
                            <h6 class="text-dark">Rata-rata Waktu</h6>
                            <p class="text-muted mb-0">2.5 hari</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .avatar-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 14px;
    }

    .priority-score {
        font-weight: 600;
        font-size: 0.875rem;
        color: #1e293b;
    }

    .priority-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .priority-indicator.high {
        background: #ef4444;
        box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }

    .priority-indicator.medium {
        background: #f59e0b;
        box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
    }

    .priority-indicator.low {
        background: #06b6d4;
        box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
    }

    .custom-scrollbar::-webkit-scrollbar {
        width: 4px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 2px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
</style>

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // Animation on scroll
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    document.querySelectorAll('.fade-in, .fade-in-delay').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(20px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });

    // Animate stats numbers
    document.querySelectorAll('.stats-number').forEach(el => {
        const target = parseInt(el.textContent);
        let current = 0;
        const increment = target / 30;
        const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
                el.textContent = target;
                clearInterval(timer);
            } else {
                el.textContent = Math.floor(current);
            }
        }, 50);
    });

    // Animate progress bars
    setTimeout(() => {
        document.querySelectorAll('.progress-bar-custom').forEach(bar => {
            const width = bar.style.width;
            bar.style.width = '0%';
            setTimeout(() => {
                bar.style.width = width;
            }, 100);
        });
    }, 500);
</script>
@endsection
@endsection