@extends('layouts.apex')

@section('title', 'Dashboard')

@section('header-title', 'Dashboard Overview')

@section('content')
<!-- Statistics Grid -->
<div class="stat-grid">
    <div class="stat-card">
        <div class="stat-icon primary">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
            </svg>
        </div>
        <div class="stat-label">Total Kolam</div>
        <div class="stat-value">{{ $totalKolam }}</div>
        <div class="stat-change positive">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
            </svg>
            {{ $activeKolam }} Aktif
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon success">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
            </svg>
        </div>
        <div class="stat-label">Pakan Hari Ini</div>
        <div class="stat-value">{{ number_format($todayFeed, 1) }} <span style="font-size: 1.2rem;">KG</span></div>
        <div class="stat-change positive">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
            </svg>
            {{ $todayFeedCount }}x Pemberian
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon info">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
            </svg>
        </div>
        <div class="stat-label">Cek Anco Hari Ini</div>
        <div class="stat-value">{{ $todayAnco }}</div>
        <div class="stat-change positive">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
            </svg>
            Real-time Update
        </div>
    </div>

    <div class="stat-card">
        <div class="stat-icon warning">
            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
            </svg>
        </div>
        <div class="stat-label">Cek Kualitas Air</div>
        <div class="stat-value">{{ $todayCekAir }}</div>
        <div class="stat-change positive">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Optimal Status
        </div>
    </div>
</div>

<!-- Charts Grid -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
    <!-- Feed Consumption Chart -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Konsumsi Pakan 7 Hari Terakhir</h3>
        </div>
        <div class="card-body">
            <canvas id="feedChart" style="height: 300px;"></canvas>
        </div>
    </div>

    <!-- Water Quality Chart -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Rata-rata Kualitas Air Mingguan</h3>
        </div>
        <div class="card-body">
            <canvas id="waterQualityChart" style="height: 300px;"></canvas>
        </div>
    </div>
</div>

<!-- Recent Activities Table -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Aktivitas Terbaru</h3>
    </div>
    <div class="card-body">
        <table id="recentActivitiesTable" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Module</th>
                    <th>Kolam</th>
                    <th>Tanggal</th>
                    <th>Status</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    // Feed Consumption Chart
    const feedCtx = document.getElementById('feedChart').getContext('2d');
    new Chart(feedCtx, {
        type: 'line',
        data: {
            labels: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'],
            datasets: [{
                label: 'Konsumsi Pakan (KG)',
                data: [{{ $feedLast7Days->implode(',') }}],
                borderColor: '#435ebe',
                backgroundColor: 'rgba(67, 94, 190, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4,
                pointRadius: 5,
                pointHoverRadius: 7,
                pointBackgroundColor: '#435ebe',
                pointBorderColor: '#fff',
                pointBorderWidth: 2,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });

    // Water Quality Chart
    const waterCtx = document.getElementById('waterQualityChart').getContext('2d');
    new Chart(waterCtx, {
        type: 'bar',
        data: {
            labels: ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'],
            datasets: [
                {
                    label: 'pH',
                    data: [7.5, 7.8, 7.6, 7.9, 7.7, 8.0, 7.8],
                    backgroundColor: 'rgba(67, 94, 190, 0.8)',
                },
                {
                    label: 'DO (mg/L)',
                    data: [5.2, 5.5, 5.3, 5.6, 5.4, 5.7, 5.5],
                    backgroundColor: 'rgba(0, 202, 148, 0.8)',
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top',
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });

    // Recent Activities DataTable
    $('#recentActivitiesTable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: {
            url: '{{ route('dashboard.activities') }}',
            type: 'GET',
            data: function(d) {
                d._token = '{{ csrf_token() }}';
            }
        },
        columns: [
            { data: 'module', name: 'module' },
            { data: 'kolam', name: 'kolam' },
            { data: 'tanggal_format', name: 'tanggal' },
            { data: 'status_badge', name: 'status', orderable: false, searchable: false }
        ],
        order: [[2, 'desc']],
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.6/i18n/id.json'
        }
    });
});
</script>
@endpush