@extends('admin.layouts.master')

@section('page-title', 'Dashboard')

@section('styles')
<style>
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(320px, 0.9fr);
    gap: 1.5rem;
}

.dashboard-panel {
    overflow: hidden;
}

.dashboard-panel-head {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.dashboard-panel-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}

.dashboard-panel-subtitle {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
}

.dashboard-panel-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--secondary) 18%, var(--surface-bg));
    color: var(--secondary);
    box-shadow: var(--shadow-card);
}

.quick-actions-grid {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.quick-action-card {
    min-height: 128px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.10);
}

.quick-action-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
    font-size: 1.25rem;
}

.quick-action-label {
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.system-info-list {
    padding: 1.5rem;
    display: grid;
    gap: 0.85rem;
}

.system-info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 18px;
    padding: 1rem 1.1rem;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
}

.system-info-label {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
}

.system-info-label i {
    color: var(--text-muted);
}

.system-info-value {
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
}

@media (max-width: 1199px) {
    .quick-actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .quick-actions-grid {
        grid-template-columns: 1fr;
    }
}
</style>
@endsection

@section('content')
<div class="row g-4 mb-4">
    <div class="col-md-6 col-xl-3">
        <div class="stats-card" style="border-left: 4px solid #1E40AF;">
            <div class="stats-icon" style="background: #DBEAFE;">
                <i class="fa-solid fa-layer-group text-primary"></i>
            </div>
            <div class="stats-info">
                <h4>{{ $stats['total_services'] }}</h4>
                <p>Layanan</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="stats-card" style="border-left: 4px solid #3B82F6;">
            <div class="stats-icon" style="background: #DBEAFE;">
                <i class="fa-solid fa-code text-primary"></i>
            </div>
            <div class="stats-info">
                <h4>{{ $stats['total_technologies'] }}</h4>
                <p>Teknologi</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="stats-card" style="border-left: 4px solid #10B981;">
            <div class="stats-icon" style="background: #D1FAE5;">
                <i class="fa-solid fa-briefcase text-success"></i>
            </div>
            <div class="stats-info">
                <h4>{{ $stats['total_portfolios'] }}</h4>
                <p>Portofolio</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="stats-card" style="border-left: 4px solid #F59E0B;">
            <div class="stats-icon" style="background: #FEF3C7;">
                <i class="fa-solid fa-newspaper text-warning"></i>
            </div>
            <div class="stats-info">
                <h4>{{ $stats['total_blogs'] }}</h4>
                <p>Artikel</p>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-6 col-xl-3">
        <div class="stats-card" style="border-left: 4px solid #EF4444;">
            <div class="stats-icon" style="background: #FEE2E2;">
                <i class="fa-solid fa-envelope text-danger"></i>
            </div>
            <div class="stats-info">
                <h4>{{ $stats['unread_messages'] }} / {{ $stats['total_messages'] }}</h4>
                <p>Pesan Baru</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="stats-card" style="border-left: 4px solid #8B5CF6;">
            <div class="stats-icon" style="background: #EDE9FE;">
                <i class="fa-solid fa-handshake text-purple"></i>
            </div>
            <div class="stats-info">
                <h4>{{ $stats['total_inquiries'] }}</h4>
                <p>Inquiries</p>
            </div>
        </div>
    </div>
    <div class="col-md-6 col-xl-3">
        <div class="stats-card" style="border-left: 4px solid #EC4899;">
            <div class="stats-icon" style="background: #FCE7F3;">
                <i class="fa-solid fa-users text-pink"></i>
            </div>
            <div class="stats-info">
                <h4>{{ $stats['total_team'] }}</h4>
                <p>Tim</p>
            </div>
        </div>
    </div>
</div>

<div class="dashboard-grid mb-4">
    <div class="card-admin dashboard-panel">
        <div class="dashboard-panel-head">
            <div>
                <h3 class="dashboard-panel-title">Quick Actions</h3>
                <p class="dashboard-panel-subtitle">Create new content instantly</p>
            </div>
            <span class="dashboard-panel-icon">
                <i class="fa-solid fa-bolt"></i>
            </span>
        </div>
        <div class="quick-actions-grid">
            @foreach($quickActions as $action)
            <a href="{{ $action['route'] }}" class="quick-action-card" style="background: {{ $action['background'] }};">
                <span class="quick-action-icon" style="color: {{ $action['accent'] }};">
                    <i class="fa-solid {{ $action['icon'] }}"></i>
                </span>
                <span class="quick-action-label">{{ $action['label'] }}</span>
            </a>
            @endforeach
        </div>
    </div>

    <div class="card-admin dashboard-panel">
        <div class="dashboard-panel-head">
            <div>
                <h3 class="dashboard-panel-title">System Info</h3>
                <p class="dashboard-panel-subtitle">Application status</p>
            </div>
        </div>
        <div class="system-info-list">
            @foreach($systemInfo as $item)
            <div class="system-info-item">
                <div class="system-info-label">
                    <i class="fa-solid {{ $item['icon'] }}" style="color: {{ $item['icon_color'] }};"></i>
                    <span>{{ $item['label'] }}</span>
                </div>
                <div class="system-info-value" style="color: {{ $item['value_color'] }};">
                    {{ $item['value'] }}
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-6">
        <div class="card-admin">
            <div class="card-header-admin d-flex justify-content-between align-items-center">
                <span>Pesan Terbaru</span>
                <a href="{{ route('admin.messages.index') }}" class="btn btn-admin btn-admin-secondary btn-sm">Lihat Semua</a>
            </div>
            <div class="card-body-admin p-0">
                @if(count($recent_messages) > 0)
                <div class="table-responsive">
                    <table class="table table-admin mb-0">
                        <tbody>
                            @foreach($recent_messages as $message)
                            <tr>
                                <td>
                                    <strong>{{ $message->name }}</strong>
                                    <br>
                                    <small style="color: var(--gray-500);">{{ $message->subject ?? 'Tanpa Subjek' }}</small>
                                </td>
                                <td>
                                    @if(!$message->is_read)
                                    <span class="badge-status badge-draft">Baru</span>
                                    @endif
                                </td>
                                <td>
                                    <small>{{ $message->created_at->format('d M Y') }}</small>
                                </td>
                                <td>
                                    <a href="{{ route('admin.messages.show', $message->id) }}" class="btn btn-admin btn-admin-primary btn-sm">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-4">
                    <i class="fa-regular fa-envelope" style="font-size: 2rem; color: var(--gray-300);"></i>
                    <p class="mt-2" style="color: var(--gray-500);">Belum ada pesan</p>
                </div>
                @endif
            </div>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="card-admin">
            <div class="card-header-admin d-flex justify-content-between align-items-center">
                <span>Inquiries Terbaru</span>
                <a href="{{ route('admin.inquiries.index') }}" class="btn btn-admin btn-admin-secondary btn-sm">Lihat Semua</a>
            </div>
            <div class="card-body-admin p-0">
                @if(count($recent_inquiries) > 0)
                <div class="table-responsive">
                    <table class="table table-admin mb-0">
                        <tbody>
                            @foreach($recent_inquiries as $inquiry)
                            <tr>
                                <td>
                                    <strong>{{ $inquiry->name }}</strong>
                                    <br>
                                    <small style="color: var(--gray-500);">{{ $inquiry->company ?? '-' }}</small>
                                </td>
                                <td>
                                    <span class="badge-status badge-{{ $inquiry->status == 'new' ? 'draft' : ($inquiry->status == 'completed' ? 'active' : 'active') }}">
                                        {{ ucfirst($inquiry->status) }}
                                    </span>
                                </td>
                                <td>
                                    <small>{{ $inquiry->created_at->format('d M Y') }}</small>
                                </td>
                                <td>
                                    <a href="{{ route('admin.inquiries.show', $inquiry->id) }}" class="btn btn-admin btn-admin-primary btn-sm">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @else
                <div class="text-center py-4">
                    <i class="fa-regular fa-handshake" style="font-size: 2rem; color: var(--gray-300);"></i>
                    <p class="mt-2" style="color: var(--gray-500);">Belum ada inquiry</p>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection