@extends('layouts.master')

@section('top')
@endsection

@section('content')

@if(Auth::check() && Auth::user()->role  == "admin")
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-aqua">
            <div class="inner">
                <h3>{{ \App\User::count() }}</h3>

                <p>Users</p>
            </div>
            <div class="icon">
                <i class="ion ion-person"></i>
            </div>
            <a href="/user" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-olive">
            <div class="inner">
                <h3>{{ \App\Staff::count() }}</h3>

                <p>Staff</p>
            </div>
            <div class="icon">
                <i class="ion ion-bag"></i>
            </div>
            <a href="{{ route('staff.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
            <div class="inner">
                <h3>{{ \App\Customer::count() }}</h3>

                <p>Customer</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <a href="{{ route('customers.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-teal">
            <div class="inner">
                <h3>{{ \App\Supplier::count() }}<sup style="font-size: 20px"></sup></h3>

                <p>Supplier</p>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="{{ route('suppliers.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
</div>

<div class="row">
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-green">
            <div class="inner">
                <h3>{{ \App\Category::count() }}<sup style="font-size: 20px"></sup></h3>

                <p>Category</p>
            </div>
            <div class="icon">
                <i class="fa fa-list"></i>
            </div>
            <a href="{{ route('categories.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3>{{ \App\Product::count() }}</h3>
                <p>Product</p>
            </div>
            <div class="icon">
                <i class="fa fa-cubes"></i>
            </div>
            <a href="{{ route('products.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-maroon">
            <div class="inner">
                <h3>{{ \App\Product_Masuk::count() }}</h3>

                <p>Product In</p>
            </div>
            <div class="icon">
                <i class="fa fa-plus"></i>
            </div>
            <a href="{{ route('productsIn.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-3 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-gray">
            <div class="inner">
                <h3>{{ \App\Product_Keluar::count()  }}</h3>

                <p>Product Out</p>
            </div>
            <div class="icon">
                <i class="fa fa-minus"></i>
            </div>
            <a href="{{ route('productsOut.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
</div>

<!-- Tampilkan barang keluar yang dipinjamkan -->
<div class="row">
    <div class="col-lg-12 col-xs-12">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Items Out (Loaned)</h3>
            </div>
            <div class="box-body bg-gray">
                @if ($loanedItems->isEmpty())
                    <p>Empty data: No items are currently borrowed.</p>
                @else
                    <ul>
                        @foreach ($loanedItems as $item)
                            <li>
                                <strong>{{ $item['nama_barang'] }}</strong> 
                                - Serial Number: <em>{{ $item['sn'] }}</em>
                                - Borrowed by: <em>{{ $item['dipinjam_oleh'] }}</em>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
    <!-- ./col -->
</div>

<!-- Tampilkan 5 Customer dengan Peminjaman Terbanyak (Status Dipinjamkan) -->
<div class="row">
    <div class="col-lg-12 col-xs-12">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Top 5 Customers with Most Loans (Loaned)</h3>
            </div>
            <div class="box-body bg-gray">
                @if ($topCustomersEmpty)
                    <p>Empty data: No customers are borrowing items at the moment.</p>
                @else
                    <ul>
                        @foreach ($topCustomers as $customer)
                            <li>
                                <strong>{{ $customer->nama }}</strong> - Loan: <em>{{ $customer->product_keluar_count }} barang</em>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
    <!-- ./col -->
</div>

<!-- Grafik -->
<div class="row">
    <!-- Grafik Barang Masuk dan Keluar (Pie Chart) -->
    <div class="col-lg-6 col-xs-6">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Incoming and Outgoing Chart (Pie)</h3>
            </div>
            <div class="box-body bg-gray">
                <canvas id="productPieChart" style="height:250px;"></canvas>
            </div>
        </div>
    </div>
    <!-- ./col -->
    <!-- Grafik Produk Berdasarkan Brand (Bar Chart) -->
    <div class="col-lg-6 col-xs-6">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Product Count by Brand</h3>
            </div>
            <div class="box-body bg-gray">
                <canvas id="productByBrandChart" style="height:250px;"></canvas>
            </div>
        </div>
    </div>
    <!-- ./col -->
</div>

<!---------------------------------------------------------------- Staff ---------------------------------------------------------------->

@elseif (Auth::check())
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-4 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-yellow">
            <div class="inner">
                <h3>{{ \App\Product::count() }}</h3>
                <p>Product</p>
            </div>
            <div class="icon">
                <i class="fa fa-cubes"></i>
            </div>
            <a href="{{ route('products.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    
    <div class="col-lg-4 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-maroon">
            <div class="inner">
                <h3>{{ \App\Product_Masuk::count() }}</h3>
                <p>Product In</p>
            </div>
            <div class="icon">
                <i class="fa fa-plus"></i>
            </div>
            <a href="{{ route('productsIn.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    
    <div class="col-lg-4 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-gray">
            <div class="inner">
                <h3>{{ \App\Product_Keluar::count() }}</h3>
                <p>Product Out</p>
            </div>
            <div class="icon">
                <i class="fa fa-minus"></i>
            </div>
            <a href="{{ route('productsOut.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
    <div class="col-lg-4 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-olive">
            <div class="inner">
                <h3>{{ \App\Staff::count() }}</h3>
                <p>Staff</p>
            </div>
            <div class="icon">
                <i class="ion ion-bag"></i>
            </div>
            <a href="{{ route('staff.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
</div>

<div class="row">
    <div class="col-lg-4 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-red">
            <div class="inner">
                <h3>{{ \App\Customer::count() }}</h3>
                <p>Customer</p>
            </div>
            <div class="icon">
                <i class="fa fa-users"></i>
            </div>
            <a href="{{ route('customers.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->

    <div class="col-lg-4 col-xs-6">
        <!-- small box -->
        <div class="small-box bg-teal">
            <div class="inner">
                <h3>{{ \App\Supplier::count() }}</h3>
                <p>Supplier</p>
            </div>
            <div class="icon">
                <i class="ion ion-stats-bars"></i>
            </div>
            <a href="{{ route('suppliers.index') }}" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
        </div>
    </div>
    <!-- ./col -->
</div>

<!-- Tampilkan barang keluar yang dipinjamkan -->
<div class="row">
    <div class="col-lg-12 col-xs-12">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Items Out (Loaned)</h3>
            </div>
            <div class="box-body bg-gray">
                @if ($loanedItems->isEmpty())
                    <p>Empty data: No items are currently borrowed.</p>
                @else
                    <ul>
                        @foreach ($loanedItems as $item)
                            <li>
                                <strong>{{ $item['nama_barang'] }}</strong> 
                                - Serial Number: <em>{{ $item['sn'] }}</em>
                                - Borrowed by: <em>{{ $item['dipinjam_oleh'] }}</em>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
    <!-- ./col -->
</div>

<!-- Tampilkan 5 Customer dengan Peminjaman Terbanyak (Status Dipinjamkan) -->
<div class="row">
    <div class="col-lg-12 col-xs-12">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Top 5 Customers with Most Loans (Loaned)</h3>
            </div>
            <div class="box-body bg-gray">
                @if ($topCustomersEmpty)
                    <p>Empty data: No customers are borrowing items at the moment.</p>
                @else
                    <ul>
                        @foreach ($topCustomers as $customer)
                            <li>
                                <strong>{{ $customer->nama }}</strong> - Loan: <em>{{ $customer->product_keluar_count }} barang</em>
                            </li>
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
    <!-- ./col -->
</div>

<!-- Grafik -->
<div class="row">
    <!-- Grafik Barang Masuk dan Keluar (Pie Chart) -->
    <div class="col-lg-6 col-xs-6">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Incoming and Outgoing Chart (Pie)</h3>
            </div>
            <div class="box-body bg-gray">
                <canvas id="productPieChart" style="height:250px;"></canvas>
            </div>
        </div>
    </div>
    <!-- ./col -->
    <!-- Grafik Produk Berdasarkan Brand (Bar Chart) -->
    <div class="col-lg-6 col-xs-6">
        <div class="box">
            <div class="box-header with-border">
                <h3 class="box-title">Product Count by Brand</h3>
            </div>
            <div class="box-body bg-gray">
                <canvas id="productByBrandChart" style="height:250px;"></canvas>
            </div>
        </div>
    </div>
    <!-- ./col -->
</div>

@endif

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Pie -->
<script>
    var ctx = document.getElementById('productPieChart').getContext('2d');
    var productPieChart = new Chart(ctx, {
        type: 'pie', // Jenis grafik (pie chart)
        data: {
            labels: ['Product In', 'Product Out'], // Label untuk bagian pie chart
            datasets: [{
                label: 'Number of Products',
                data: [{{ $productsInCount }}, {{ $productsOutCount }}], // Data yang ditampilkan
                backgroundColor: ['#28a745', '#dc3545'], // Warna bagian pie chart (hijau untuk masuk, merah untuk keluar)
                borderColor: ['#218838', '#c82333'], // Warna border untuk bagian pie chart
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top', // Posisi legenda (bisa diubah sesuai kebutuhan)
                    labels: {
                        font: {
                            size: 14, // Ukuran font untuk label
                        },
                    },
                },
                tooltip: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return tooltipItem.label + ': ' + tooltipItem.raw; // Format tooltip
                        }
                    }
                }
            }
        }
    });
</script>

<!-- Bar -->
<script>
    // Mengambil data dari Blade Template
    var brandLabels = @json($brandLabels);
    var brandData = @json($brandData);

    // Bar Chart untuk Produk berdasarkan Brand
    var ctx = document.getElementById('productByBrandChart').getContext('2d');
    var productByBrandChart = new Chart(ctx, {
        type: 'bar', // Jenis grafik (bar chart)
        data: {
            labels: brandLabels, // Label berdasarkan brand
            datasets: [{
                label: 'Number of Products',
                data: brandData, // Data jumlah produk per brand
                backgroundColor: '#4CAF50', // Warna batang
                borderColor: '#388E3C', // Warna border batang
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true, // Mulai sumbu Y dari 0
                }
            },
            plugins: {
                legend: {
                    display: false, // Tidak menampilkan legenda
                },
                tooltip: {
                    callbacks: {
                        label: function(tooltipItem) {
                            return tooltipItem.label + ': ' + tooltipItem.raw; // Menampilkan jumlah produk
                        }
                    }
                }
            }
        }
    });
</script>

@endsection

@section('top')
@endsection