@extends('layouts.main')

@section('content')
<div class="container-fluid">
    <div class="card shadow-sm mb-4">
        <div class="card-header">
            <h1 class="h4 mb-0">Admin Dashboard</h1>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('home') }}" class="row g-3 mb-4 align-items-end">
                <div class="col-md-4">
                    <label for="range" class="form-label">Filter by Range</label>
                    <select name="range" id="range" class="form-select">
                        <option value="today" {{ request('range') == 'today' ? 'selected' : '' }}>Today</option>
                        <option value="yesterday" {{ request('range') == 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                        <option value="last_7_days" {{ request('range', 'last_30_days') == 'last_7_days' ? 'selected' : '' }}>Last 7 Days</option>
                        <option value="last_30_days" {{ request('range', 'last_30_days') == 'last_30_days' ? 'selected' : '' }}>Last 30 Days</option>
                        <option value="this_month" {{ request('range') == 'this_month' ? 'selected' : '' }}>This Month</option>
                        <option value="last_month" {{ request('range') == 'last_month' ? 'selected' : '' }}>Last Month</option>
                        <option value="this_month_last_year" {{ request('range') == 'this_month_last_year' ? 'selected' : '' }}>This Month Last Year</option>
                        <option value="this_year" {{ request('range') == 'this_year' ? 'selected' : '' }}>This Year</option>
                        <option value="last_year" {{ request('range') == 'last_year' ? 'selected' : '' }}>Last Year</option>
                        <option value="custom" {{ request('range') == 'custom' ? 'selected' : '' }}>Custom Range</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="start_date" class="form-label">Start Date</label>
                    <input type="date" name="start_date" id="start_date" class="form-control" value="{{ request('start_date') }}">
                </div>
                <div class="col-md-3">
                    <label for="end_date" class="form-label">End Date</label>
                    <input type="date" name="end_date" id="end_date" class="form-control" value="{{ request('end_date') }}">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">Apply</button>
                </div>
            </form>

            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h6>Cement In</h6>
                            <h4>{{ number_format($cementIn) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h6>Cement Out</h6>
                            <h4>{{ number_format($cementOut) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h6>Expected Output</h6>
                            <h4>{{ number_format($expectedOutput) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h6>Actual Output</h6>
                            <h4>{{ number_format($actualOutput) }}</h4>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mb-5">
                <div class="col-md-6">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h6>Money Made Before Expenses</h6>
                            <h4>Tsh {{ number_format($moneyMade, 2) }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            <h6>Money Made After Expenses</h6>
                            <h4>Tsh {{ number_format($moneyMade, 2) }}</h4>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="mt-4">Production Over Time</h4>
            <canvas id="productionChart" height="100"></canvas>

            <h4 class="mt-5">Expected vs Actual Output Over Time</h4>
            <canvas id="comparisonChart" height="100"></canvas>

            <h4 class="mt-5">Expected vs Actual Output per Brick Type</h4>
            <canvas id="brickTypeChart" height="100"></canvas>

            <h4 class="mt-5">Stock of Actual Output per Brick Type</h4>
            <canvas id="stockChart" height="100"></canvas>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const productionCtx = document.getElementById('productionChart').getContext('2d');
    const comparisonCtx = document.getElementById('comparisonChart').getContext('2d');
    const brickTypeCtx = document.getElementById('brickTypeChart').getContext('2d');
    const stockCtx = document.getElementById('stockChart').getContext('2d');

    const productionData = {
        labels: {!! json_encode($productionGraph->pluck('date')) !!},
        datasets: [{
            label: 'Actual Output',
            data: {!! json_encode($productionGraph->pluck('total')) !!},
            backgroundColor: 'rgba(0, 123, 255, 0.7)',
            borderColor: 'rgba(0, 123, 255, 1)',
            borderWidth: 1
        }]
    };

    const comparisonData = {
        labels: {!! json_encode($comparisonGraph->pluck('date')) !!},
        datasets: [
            {
                label: 'Expected Output',
                data: {!! json_encode($comparisonGraph->pluck('expected')) !!},
                backgroundColor: 'rgba(255, 159, 64, 0.7)',
                borderColor: 'rgba(255, 159, 64, 1)',
                borderWidth: 1
            },
            {
                label: 'Actual Output',
                data: {!! json_encode($comparisonGraph->pluck('actual')) !!},
                backgroundColor: 'rgba(40, 167, 69, 0.7)',
                borderColor: 'rgba(40, 167, 69, 1)',
                borderWidth: 1
            }
        ]
    };

    const brickTypeData = {
        labels: {!! json_encode($brickTypeComparison->pluck('brick_type')) !!},
        datasets: [
            {
                label: 'Expected Output',
                data: {!! json_encode($brickTypeComparison->pluck('expected')) !!},
                backgroundColor: 'rgba(220, 53, 69, 0.7)',
                borderColor: 'rgba(220, 53, 69, 1)',
                borderWidth: 1
            },
            {
                label: 'Actual Output',
                data: {!! json_encode($brickTypeComparison->pluck('actual')) !!},
                backgroundColor: 'rgba(23, 162, 184, 0.7)',
                borderColor: 'rgba(23, 162, 184, 1)',
                borderWidth: 1
            }
        ]
    };

    const stockData = {
        labels: {!! json_encode($brickStockGraph->pluck('brick_type')) !!},
        datasets: [{
            label: 'Stock Actual Output',
            data: {!! json_encode($brickStockGraph->pluck('total')) !!},
            backgroundColor: 'rgba(111, 66, 193, 0.7)',
            borderColor: 'rgba(111, 66, 193, 1)',
            borderWidth: 1
        }]
    };

    new Chart(productionCtx, {
        type: 'bar',
        data: productionData,
        options: {
            responsive: true,
            plugins: { title: { display: true, text: 'Daily Production (Actual Output)' } },
            scales: { y: { beginAtZero: true } }
        }
    });

    new Chart(comparisonCtx, {
        type: 'bar',
        data: comparisonData,
        options: {
            responsive: true,
            plugins: { title: { display: true, text: 'Expected vs Actual Output Over Time' } },
            scales: { y: { beginAtZero: true } }
        }
    });

    new Chart(brickTypeCtx, {
        type: 'bar',
        data: brickTypeData,
        options: {
            responsive: true,
            plugins: { title: { display: true, text: 'Expected vs Actual Output per Brick Type' } },
            scales: { y: { beginAtZero: true } }
        }
    });

    new Chart(stockCtx, {
        type: 'bar',
        data: stockData,
        options: {
            responsive: true,
            plugins: { title: { display: true, text: 'Stock: Actual Output per Brick Type' } },
            scales: { y: { beginAtZero: true } }
        }
    });
</script>
@endpush