@extends('layouts.app')

@section('content')
<style>
    .dashboard-header {
        background: #ff7b00;
        color: white;
        padding: 30px;
        border-radius: 15px;
        margin-top: 20px;
        margin-bottom: 30px;
        position: relative;
    }
    .dashboard-header h1 {
        font-weight: 700;
        font-size: 2rem;
        margin-bottom: 10px;
    }
    .dashboard-header .meta-info {
        font-size: 1.1rem;
        opacity: 0.9;
    }
    .dashboard-header .meta-info i {
        margin-right: 8px;
    }
    .stat-card {
        border-radius: 15px;
        border: 1px solid #e0e0e0;
        transition: transform 0.2s;
        height: 100%;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    }
    .stat-card .card-header-custom {
        padding: 20px 20px 10px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .stat-card .stat-label {
        font-weight: 600;
        color: #616161;
        font-size: 1rem;
    }
    .stat-card .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }
    .stat-card .card-body {
        padding: 10px 20px 25px;
    }
    .stat-card .stat-value {
        font-size: 2.2rem;
        font-weight: 800;
        margin-bottom: 1px;
    }
    .stat-card .stat-subtext {
        font-size: 0.9rem;
        color: #757575;
    }

    /* Color variations */
    .stat-card.green { border-bottom: 4px solid #c8e6c9; }
    .stat-card.green .stat-icon { background-color: #e8f5e9; color: #2e7d32; }
    .stat-card.green .stat-value { color: #1b5e20; }
    .stat-card.green .stat-label-bg { background: #f1fbf1; }

    .stat-card.red { border-bottom: 4px solid #ffcdd2; }
    .stat-card.red .stat-icon { background-color: #ffebee; color: #c62828; }
    .stat-card.red .stat-value { color: #b71c1c; }
    .stat-card.red .stat-label-bg { background: #fff5f5; }

    .stat-card.blue { border-bottom: 4px solid #bbdefb; }
    .stat-card.blue .stat-icon { background-color: #e3f2fd; color: #1565c0; }
    .stat-card.blue .stat-value { color: #0d47a1; }
    .stat-card.blue .stat-label-bg { background: #f5faff; }
    
    .stat-label-bg {
        padding: 5px 20px;
        margin-bottom: 10px;
    }
</style>

<div class="container-fluid px-4">
    <!-- Redesigned Header -->
    <div class="dashboard-header shadow-sm">
        <h1>Dashboard Karyawan</h1>
        <div class="meta-info">
            <div><i class="fas fa-shopping-cart"></i> Lokasi: {{ session('branch') ?? 'Cabang 1' }}</div>
            <div class="mt-1" id="current-date-display">
                <!-- Will be updated by JS or PHP -->
                {{ \Carbon\Carbon::now()->translatedFormat('l, d F Y') }}
            </div>
        </div>
    </div>

    <!-- Redesigned Triple Cards -->
    <div class="row">
        <!-- Card 1: Total Penjualan -->
        <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
            <div class="stat-card green bg-white shadow-sm overflow-hidden">
                <div class="stat-label-bg">
                    <div class="card-header-custom p-0 mb-0">
                        <span class="stat-label">Total Penjualan Hari Ini</span>
                        <div class="stat-icon"><i class="fas fa-chart-line"></i></div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="stat-value">Rp {{ number_format($totalSalesToday, 0, ',', '.') }}</div>
                    <div class="stat-subtext">{{ $transactionCountToday }} transaksi hari ini</div>
                </div>
            </div>
        </div>

        <!-- Card 2: Total Pengeluaran -->
        <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
            <div class="stat-card red bg-white shadow-sm overflow-hidden">
                <div class="stat-label-bg">
                    <div class="card-header-custom p-0 mb-0">
                        <span class="stat-label">Total Pengeluaran Hari Ini</span>
                        <div class="stat-icon"><i class="fas fa-chart-line fa-flip-vertical"></i></div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="stat-value">Rp {{ number_format($totalPurchasesToday, 0, ',', '.') }}</div>
                    <div class="stat-subtext">Operasional & supplies</div>
                </div>
            </div>
        </div>

        <!-- Card 3: Jumlah Penjualan (Custom requested change) -->
        <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
            <div class="stat-card blue bg-white shadow-sm overflow-hidden">
                <div class="stat-label-bg">
                    <div class="card-header-custom p-0 mb-0">
                        <span class="stat-label">Total Transaksi Penjualan</span>
                        <div class="stat-icon"><i class="fas fa-wallet"></i></div>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Changing Saldo Kas to amount of transactions as per request -->
                    <div class="stat-value text-center" style="font-size: 3rem;">{{ $transactionCountToday }}</div>
                    <div class="stat-subtext text-center font-weight-bold mt-2">Transaksi Selesai</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional Detail Section (Keep for functionality) -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm border-0" style="border-radius: 15px;">
                <div class="card-header bg-white py-3">
                    <h5 class="mb-0 font-weight-bold"><i class="fas fa-history mr-2"></i>Aktivitas Terbaru - {{ session('branch') }}</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                         <table class="table table-hover mb-0">
                         <thead>
                             <tr class="bg-light">
                                 <th class="border-0 px-4">Waktu</th>
                                 <th class="border-0">Tipe</th>
                                 <th class="border-0">Deskripsi</th>
                                 <th class="border-0 text-right px-4">Nominal</th>
                             </tr>
                         </thead>
                         <tbody>
                             @forelse($activities as $act)
                             <tr>
                                 <td class="px-4">{{ \Carbon\Carbon::parse($act->created_at)->format('H:i') }}</td>
                                 <td><span class="badge {{ $act->badge }}">{{ $act->type }}</span></td>
                                 <td>{{ $act->item }} ({{ $act->quantity }})</td>
                                 <td class="text-right px-4">Rp {{ number_format($act->total_price, 0, ',', '.') }}</td>
                             </tr>
                             @empty
                             <tr>
                                 <td colspan="4" class="text-center py-4 text-muted">Belum ada aktivitas hari ini.</td>
                             </tr>
                             @endforelse
                         </tbody>
                     </table>
                    </div>
                </div>
                <div class="card-footer bg-white text-center py-3">
                    <a href="/laporan/penjualan" class="text-primary font-weight-bold">Lihat Semua Laporan <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Ensure date matches the localized requirement if Carbon isn't ideal
    document.addEventListener('DOMContentLoaded', function() {
        const dateEl = document.getElementById('current-date-display');
        const now = new Date();
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        // dateEl.textContent = now.toLocaleDateString('id-ID', options);
    });
</script>
@endsection