@extends('admin.layout')

@php
$title = 'Product Explorer';

$currentSort = request('sort');
$currentDir = request('dir','asc');

function arrow($field,$sort,$dir){
    if($field !== $sort) return '';
    return $dir === 'asc' ? ' ▲' : ' ▼';
}

function nextDir($field,$sort,$dir){
    if($field !== $sort) return 'asc';
    return $dir === 'asc' ? 'desc' : 'asc';
}
@endphp

@section('content')

<!-- 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>
<a href="?sort=id&dir={{ nextDir('id',$currentSort,$currentDir) }}"
class="text-white text-decoration-none">
ID{!! arrow('id',$currentSort,$currentDir) !!}
</a>
</th>

<th>
<a href="?sort=reference&dir={{ nextDir('reference',$currentSort,$currentDir) }}"
class="text-white text-decoration-none">
Reference{!! arrow('reference',$currentSort,$currentDir) !!}
</a>
</th>

<th>Winning Supplier</th>

<th>
<a href="?sort=stock&dir={{ nextDir('stock',$currentSort,$currentDir) }}"
class="text-white text-decoration-none">
Stock{!! arrow('stock',$currentSort,$currentDir) !!}
</a>
</th>

<th>
<a href="?sort=cost&dir={{ nextDir('cost',$currentSort,$currentDir) }}"
class="text-white text-decoration-none">
Cost{!! arrow('cost',$currentSort,$currentDir) !!}
</a>
</th>

<th>
<a href="?sort=final_price&dir={{ nextDir('final_price',$currentSort,$currentDir) }}"
class="text-white text-decoration-none">
Final Price{!! arrow('final_price',$currentSort,$currentDir) !!}
</a>
</th>

<th>
<a href="?sort=margin&dir={{ nextDir('margin',$currentSort,$currentDir) }}"
class="text-white text-decoration-none">
Margin{!! arrow('margin',$currentSort,$currentDir) !!}
</a>
</th>

<th>
<a href="?sort=suppliers&dir={{ nextDir('suppliers',$currentSort,$currentDir) }}"
class="text-white text-decoration-none">
Suppliers{!! arrow('suppliers',$currentSort,$currentDir) !!}
</a>
</th>

<th>Best Cost</th>
<th>Worst Cost</th>

<th>
<a href="?sort=spread&dir={{ nextDir('spread',$currentSort,$currentDir) }}"
class="text-white text-decoration-none">
Spread{!! arrow('spread',$currentSort,$currentDir) !!}
</a>
</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>


<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