@extends('backend.app')

@push('styles')
<style>
    /* Premium Dashboard Styles */
    .dashboard-wrapper {
        background-color: #FAF8F5;
        min-height: calc(100vh - 120px);
        margin: -24px -24px;
        padding: 40px;
        font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
    }
    
    .dashboard-title {
        font-family: 'Outfit', 'Playfair Display', Georgia, serif;
        font-size: 26px;
        font-weight: 600;
        color: #1A2536;
        margin-bottom: 28px;
    }
    
    /* Metrics Cards styling */
    .metric-card {
        background: #ffffff;
        border: 1px solid #EAE6DF;
        border-radius: 16px;
        padding: 28px;
        box-shadow: 0 4px 15px rgba(122, 111, 98, 0.03);
        margin-bottom: 24px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        height: calc(100% - 24px);
    }
    
    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(122, 111, 98, 0.06);
    }
    
    .metric-icon-box {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        background-color: #F5F1EB;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .metric-icon-box i {
        font-size: 20px;
        color: #74675C;
    }
    
    .metric-label {
        font-size: 13px;
        font-weight: 500;
        color: #9B9287;
        margin-bottom: 10px;
        text-transform: capitalize;
    }
    
    .metric-value {
        font-size: 42px;
        font-weight: 500;
        color: #1A2536;
        line-height: 1;
        margin-bottom: 16px;
    }
    
    .metric-footer {
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    
    .text-trend-up {
        color: #2E7D32;
    }
    
    .text-trend-muted {
        color: #9B9287;
    }
    
    .text-trend-warning {
        color: #C05C2B;
    }
    
    /* Recent Memorials section */
    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 16px;
        margin-bottom: 20px;
    }
    
    .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #1A2536;
        margin: 0;
    }
    
    .btn-view-all {
        background: #ffffff;
        border: 1px solid #EAE6DF;
        border-radius: 30px;
        padding: 6px 16px;
        font-size: 13px;
        font-weight: 500;
        color: #1A2536;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        transition: all 0.2s ease;
    }
    
    .btn-view-all:hover {
        background-color: #F5F1EB;
        border-color: #D3CDC6;
        color: #1A2536;
    }
    
    /* Table Container Styling */
    .table-card {
        background: #ffffff;
        border: 1px solid #EAE6DF;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(122, 111, 98, 0.03);
    }
    
    .custom-table {
        width: 100%;
        margin-bottom: 0;
        border-collapse: collapse;
    }
    
    .custom-table th {
        background-color: #F1EDE7;
        color: #7E7265;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        padding: 14px 24px;
        border: none;
    }
    
    .custom-table td {
        padding: 16px 24px;
        vertical-align: middle;
        border-top: none;
        border-bottom: 1px solid #F1EDE7;
        color: #4A4A4A;
        font-size: 14px;
    }
    
    .custom-table tr:last-child td {
        border-bottom: none;
    }
    
    .custom-table tr {
        transition: background-color 0.2s ease;
    }
    
    .custom-table tr:hover {
        background-color: #FAF8F5;
    }
    
    /* Memorial avatar and identity */
    .memorial-identity {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .memorial-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
        background-color: #F5F1EB;
    }
    
    .memorial-name {
        font-weight: 500;
        color: #1A2536;
    }
    
    /* Status Badges */
    .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 12px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 500;
        width: fit-content;
    }
    
    .status-published {
        background-color: #E6F4EA;
        color: #137333;
    }
    
    .status-pending {
        background-color: #FEF7E0;
        color: #B06000;
    }
    
    .status-badge i {
        font-size: 14px;
    }
    
    /* Action Buttons */
    .btn-action-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 1px solid #EAE6DF;
        background-color: #ffffff;
        color: #7E7265;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        text-decoration: none;
    }
    
    .btn-action-circle:hover {
        background-color: #F5F1EB;
        color: #1A2536;
        border-color: #D3CDC6;
    }
</style>
@endpush

@section('content')
<div class="dashboard-wrapper">
    <div class="dashboard-title">Dashboard Overview</div>
    
    <div class="row">
        <!-- Card 1: Total Memorials -->
        <div class="col-xl-4 col-md-6">
            <div class="metric-card">
                <div class="metric-icon-box">
                    <i class="ri-book-open-line"></i>
                </div>
                <div class="metric-label">Total memorials</div>
                <div class="metric-value">{{ $totalMemorials }}</div>
                <div class="metric-footer">
                    <span class="text-trend-up">
                        <i class="ri-arrow-right-up-line"></i> +{{ $addedThisMonth }} this month
                    </span>
                </div>
            </div>
        </div>

        <!-- Card 2: Published -->
        <div class="col-xl-4 col-md-6">
            <div class="metric-card">
                <div class="metric-icon-box">
                    <i class="ri-eye-line"></i>
                </div>
                <div class="metric-label">Published</div>
                <div class="metric-value">{{ $publishedMemorials }}</div>
                <div class="metric-footer">
                    <span class="text-trend-muted">{{ $publishedPercentage }}% of total</span>
                </div>
            </div>
        </div>

        <!-- Card 3: Pending review -->
        <div class="col-xl-4 col-md-6">
            <div class="metric-card">
                <div class="metric-icon-box">
                    <i class="ri-time-line"></i>
                </div>
                <div class="metric-label">Pending review</div>
                <div class="metric-value">{{ $pendingMemorials }}</div>
                <div class="metric-footer">
                    @if($pendingMemorials > 0)
                        <span class="text-trend-warning">
                            <i class="ri-error-warning-line"></i> Action needed
                        </span>
                    @else
                        <span class="text-trend-muted">
                            <i class="ri-checkbox-circle-line"></i> No action needed
                        </span>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Memorials Section -->
    <div class="section-header">
        <h2 class="section-title">Recent memorials</h2>
        <a href="{{ route('admin.memories.index') }}" class="btn-view-all">
            View all <i class="ri-arrow-right-line"></i>
        </a>
    </div>

    <!-- Table Container -->
    <div class="table-card">
        <div class="table-responsive">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th style="width: 30%;">Name</th>
                        <th style="width: 20%;">Dates</th>
                        <th style="width: 25%;">Family Accounts</th>
                        <th style="width: 15%;">Status</th>
                        <th style="width: 10%; text-align: center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recentMemorials as $memorial)
                        @php
                            $birthYear = $memorial->{'dob/en'} ? \Carbon\Carbon::parse($memorial->{'dob/en'})->format('Y') : '';
                            $deathYear = $memorial->{'dod/en'} ? \Carbon\Carbon::parse($memorial->{'dod/en'})->format('Y') : '';
                            $years = $birthYear && $deathYear ? "{$birthYear} – {$deathYear}" : ($birthYear ?: ($deathYear ?: 'N/A'));
                            $familyAccountName = $memorial->familyAccount ? ($memorial->familyAccount->{'name/en'} ?: $memorial->familyAccount->{'name/fr'} ?: $memorial->familyAccount->{'name/gr'} ?: 'N/A') : 'N/A';
                            
                            $avatarUrl = $memorial->profile_photo 
                                ? (file_exists(public_path($memorial->profile_photo)) ? asset($memorial->profile_photo) : asset('storage/' . $memorial->profile_photo)) 
                                : 'https://ui-avatars.com/api/?name=' . urlencode($memorial->{'name/en'} ?: 'M') . '&background=F5F1EB&color=74675C&font-size=0.45&bold=true';
                        @endphp
                        <tr>
                            <td>
                                <div class="memorial-identity">
                                    <img src="{{ $avatarUrl }}" alt="{{ $memorial->{'name/en'} }}" class="memorial-avatar">
                                    <span class="memorial-name">{{ $memorial->{'name/en'} ?: 'Unnamed Memorial' }}</span>
                                </div>
                            </td>
                            <td>{{ $years }}</td>
                            <td>{{ $familyAccountName }}</td>
                            <td>
                                @if($memorial->privacy == 'public')
                                    <span class="status-badge status-published">
                                        <i class="ri-checkbox-circle-line"></i> Published
                                    </span>
                                @else
                                    <span class="status-badge status-pending">
                                        <i class="ri-error-warning-line"></i> Pending
                                    </span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex justify-content-center">
                                    <a href="{{ route('admin.memories.edit', $memorial->id) }}" class="btn-action-circle" title="View/Edit">
                                        <i class="ri-eye-line"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">No memorials found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection