@extends('layouts.bootstrap')

@section('title', 'Dashboard')

@section('header')
    <h1 class="h3 mb-0">
        <i class="bi bi-speedometer2 me-2"></i>Dashboard
    </h1>
    <div>
        <span class="text-muted">Welcome back, {{ auth()->user()->name }}!</span>
    </div>
@endsection

@section('content')
@if(auth()->user()->canManage())
<!-- Quick Actions -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow-sm border-primary">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0">
                    <i class="bi bi-lightning me-2"></i>Quick Actions
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 mb-2">
                        <a href="{{ route('products.create') }}" class="btn btn-outline-primary w-100">
                            <i class="bi bi-plus-circle me-1"></i>Add Product
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{{ route('products.import.form') }}" class="btn btn-outline-success w-100">
                            <i class="bi bi-upload me-1"></i>Import Products
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{{ route('products.merge.index') }}" class="btn btn-outline-warning w-100">
                            <i class="bi bi-arrow-down-up me-1"></i>Merge Products
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <a href="{{ route('products.merge.history') }}" class="btn btn-outline-info w-100">
                            <i class="bi bi-clock-history me-1"></i>Merge History
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                            Total Products
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_products'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-box fs-2 text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                            Categories
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_categories'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-tags fs-2 text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                            Subcategories
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_subcategories'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-tag fs-2 text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                            Users
                        </div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $stats['total_users'] }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="bi bi-people fs-2 text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Recent Products -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-clock-history me-2"></i>Recent Products
                </h6>
                <a href="{{ route('products.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body">
                @if($recentProducts->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Product</th>
                                    <th>Category</th>
                                    <th>Price</th>
                                    <th>Created</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentProducts as $product)
                                    <tr>
                                        <td>
                                            <a href="{{ route('products.show', $product) }}" class="text-decoration-none">
                                                {{ $product->name }}
                                            </a>
                                            @if($product->isIncomplete())
                                                <span class="badge bg-warning text-dark ms-1">Incomplete</span>
                                            @endif
                                        </td>
                                        <td>{{ $product->category->name ?? '-' }}</td>
                                        <td>
                                            @if($product->price)
                                                ${{ number_format($product->price, 2) }}
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>{{ $product->created_at->diffForHumans() }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <p class="text-muted mb-0">No products found.</p>
                @endif
            </div>
        </div>
    </div>

    <!-- Categories Overview -->
    <div class="col-lg-6 mb-4">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-pie-chart me-2"></i>Categories Overview
                </h6>
            </div>
            <div class="card-body">
                @if($categoriesWithCounts->count() > 0)
                    @foreach($categoriesWithCounts as $category)
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span>{{ $category->name }}</span>
                            <span class="badge bg-primary">{{ $category->products_count }} products</span>
                        </div>
                        <div class="progress mb-3" style="height: 6px;">
                            <div class="progress-bar" role="progressbar"
                                 style="width: {{ $stats['total_products'] > 0 ? ($category->products_count / $stats['total_products']) * 100 : 0 }}%">
                            </div>
                        </div>
                    @endforeach
                @else
                    <p class="text-muted mb-0">No categories found.</p>
                @endif
            </div>
        </div>
    </div>
</div>

@if($recentPriceChanges->count() > 0)
<!-- Recent Price Changes -->
<div class="row">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="bi bi-graph-up me-2"></i>Recent Price Changes
                </h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Product</th>
                                <th>Changed By</th>
                                <th>Old Price</th>
                                <th>New Price</th>
                                <th>Change</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentPriceChanges as $change)
                                @php
                                    $oldPrice = $change->field_changes['price'] ?? 0;
                                    $newPrice = $change->product->price ?? 0;
                                    $difference = $newPrice - $oldPrice;
                                    $percentChange = $oldPrice > 0 ? (($difference / $oldPrice) * 100) : 0;
                                @endphp
                                <tr>
                                    <td>
                                        <a href="{{ route('products.show', $change->product) }}" class="text-decoration-none">
                                            {{ $change->product->name }}
                                        </a>
                                    </td>
                                    <td>{{ $change->user->name }}</td>
                                    <td>${{ number_format($oldPrice, 2) }}</td>
                                    <td>${{ number_format($newPrice, 2) }}</td>
                                    <td>
                                        <span class="badge {{ $difference >= 0 ? 'bg-success' : 'bg-danger' }}">
                                            {{ $difference >= 0 ? '+' : '' }}{{ number_format($percentChange, 1) }}%
                                        </span>
                                    </td>
                                    <td>{{ $change->created_at->diffForHumans() }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@push('styles')
<style>
.border-left-primary {
    border-left: 0.25rem solid #4e73df !important;
}
.border-left-success {
    border-left: 0.25rem solid #1cc88a !important;
}
.border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
}
.border-left-warning {
    border-left: 0.25rem solid #f6c23e !important;
}
.text-gray-300 {
    color: #dddfeb !important;
}
.text-gray-800 {
    color: #5a5c69 !important;
}
</style>
@endpush