@extends('admin.layout')

@section('content')

<h2 class="mb-4">Product Explorer</h2>

@include('admin.partials.back')


<!-- Stats -->
<div class="row mb-4">

<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h6 class="text-muted text-uppercase">Products</h6>
<h2>{{ $stats['products'] ?? 0 }}</h2>
</div>
</div>
</div>

<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h6 class="text-muted text-uppercase">With Supplier</h6>
<h2>{{ $stats['with_supplier'] ?? 0 }}</h2>
</div>
</div>
</div>

<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h6 class="text-muted text-uppercase">Without Supplier</h6>
<h2>{{ $stats['without_supplier'] ?? 0 }}</h2>
</div>
</div>
</div>

<div class="col-md-3">
<div class="card text-center shadow-sm">
<div class="card-body">
<h6 class="text-muted text-uppercase">Avg Margin</h6>
<h2>{{ $stats['avg_margin'] ?? 0 }}%</h2>
</div>
</div>
</div>

</div>


<!-- ACTION BUTTONS -->

<div class="mb-4 d-flex gap-2">

<form method="POST" action="/admin/product-explorer/recalculate-winning">
@csrf
<button class="btn btn-danger shadow-sm">
⚡ Recalculate Winning Suppliers
</button>
</form>

<form method="POST" action="/admin/product-explorer/optimize-prices">
@csrf
<button class="btn btn-warning shadow-sm">
⚡ Optimize Prices
</button>
</form>

</div>


{{-- TOP OPPORTUNITIES PANEL --}}

@if(isset($topOpportunities) && $topOpportunities->count())

<div class="card shadow-sm mb-4">

<div class="card-header bg-danger text-white">
🔥 Top Opportunities
</div>

<div class="card-body p-0">

<table class="table table-sm table-striped mb-0 w-100">

<thead class="table-light">

<tr>
<th style="width:35%">Product</th>
<th class="text-end" style="width:20%">Winning Cost</th>
<th class="text-end" style="width:20%">Best Cost</th>
<th class="text-center" style="width:15%">Opportunity</th>
<th class="text-center" style="width:10%">Score</th>
</tr>

</thead>

<tbody>

@foreach($topOpportunities as $p)

<tr>

<td>

<a href="#product-{{ $p->id }}"
class="text-decoration-none fw-bold jump-product"
data-product="{{ $p->id }}">

{{ $p->reference }}

</a>

</td>

<td class="text-end">
@if($p->cost)
€ {{ number_format($p->cost,4) }}
@else
-
@endif
</td>

<td class="text-end">
@if($p->best_cost)
€ {{ number_format($p->best_cost,4) }}
@else
-
@endif
</td>

<td class="text-center">

@if($p->opportunity_percent !== null)
<span class="badge bg-success">
+{{ $p->opportunity_percent }}%
</span>
@else
-
@endif

</td>

<td class="text-center">

<span class="badge bg-danger">
🔥 {{ $p->opportunity_score }}
</span>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

</div>

@endif


<!-- Search -->
<div class="mb-3">
<input type="text" class="form-control" placeholder="Search reference...">
</div>


<!-- Products Table -->
<table class="table table-bordered table-striped align-middle shadow-sm">

<thead class="table-dark">
<tr>

<th style="width:40px"></th>

<th><x-sort column="id">ID</x-sort></th>

<th><x-sort column="reference">Reference</x-sort></th>

<th>Winning Supplier</th>

<th><x-sort column="stock">Stock</x-sort></th>

<th><x-sort column="cost">Cost</x-sort></th>

<th><x-sort column="final_price">Final Price</x-sort></th>

<th><x-sort column="margin">Margin</x-sort></th>

<th><x-sort column="suppliers">Suppliers</x-sort></th>

<th>Best Cost</th>

<th>Worst Cost</th>

<th><x-sort column="spread">Spread</x-sort></th>

<th>Opportunity</th>

</tr>
</thead>

<tbody>

@forelse($products as $product)

<tr id="product-{{ $product->id }}">

<td>
@if(($product->suppliers_count ?? 0) > 0)
<button
class="btn btn-sm btn-outline-secondary toggle-cluster"
data-product="{{ $product->id }}">
+
</button>
@endif
</td>

<td>{{ $product->id }}</td>

<td>
<strong>{{ $product->reference }}</strong>
</td>

<td>
{{ $product->winning_supplier ?? '-' }}
</td>

<td>
{{ $product->winning_stock ?? '-' }}
</td>

<td>
@if($product->cost)
€ {{ number_format($product->cost,4) }}
@else
-
@endif
</td>

<td>
@if($product->final_price)
€ {{ number_format($product->final_price,4) }}
@else
-
@endif
</td>

<td>
@if($product->margin !== null)
{{ $product->margin }} %
@else
-
@endif
</td>

<td>
{{ $product->suppliers_count ?? 0 }}
</td>

<td>
@if($product->best_cost)
€ {{ number_format($product->best_cost,4) }}
@else
-
@endif
</td>

<td>
@if($product->worst_cost)
€ {{ number_format($product->worst_cost,4) }}
@else
-
@endif
</td>

<td>
@if($product->spread)
€ {{ number_format($product->spread,4) }}
@else
-
@endif
</td>

<td>

@if($product->opportunity_percent !== null)
<span class="badge bg-success">
+{{ $product->opportunity_percent }}%
</span>
@else
-
@endif

</td>

</tr>

<tr class="cluster-row"
id="cluster-{{ $product->id }}"
style="display:none">

<td colspan="13">

<div class="cluster-container p-3 bg-light border">
Loading suppliers...
</div>

</td>
</tr>

@empty

<tr>
<td colspan="13" class="text-center text-muted">
No products found
</td>
</tr>

@endforelse

</tbody>

</table>


@include('admin.components.pagination', ['items'=>$products])


<script>

document.querySelectorAll('.toggle-cluster').forEach(button => {

button.addEventListener('click', function () {

const productId = this.dataset.product;
const row = document.getElementById('cluster-' + productId);

if (row.style.display === 'none') {

row.style.display = 'table-row';
this.textContent = '-';

fetch('/admin/product-explorer/' + productId + '/suppliers')
.then(response => response.text())
.then(html => {

row.querySelector('.cluster-container').innerHTML = html;

});

} else {

row.style.display = 'none';
this.textContent = '+';

}

});

});


document.querySelectorAll('.jump-product').forEach(link => {

link.addEventListener('click', function(){

const productId = this.dataset.product;

setTimeout(function(){

const button = document.querySelector(
'[data-product="'+productId+'"]'
);

if(button && button.textContent === '+'){
button.click();
}

},200);

});

});

</script>

@endsection