@extends('admin.layout')

@section('content')

<h2 class="mb-4">Supplier Sync Center</h2>

@include('admin.partials.back')

@if(session('success'))
<div class="alert alert-success">
{{ session('success') }}
</div>
@endif

@if(session('error'))
<div class="alert alert-danger">
{{ session('error') }}
</div>
@endif


<div class="row mb-4">

<div class="col">
<div class="card">
<div class="card-body text-center">
<h6>Queue Pending</h6>
<h3>{{ $health['queue_pending'] ?? 0 }}</h3>
</div>
</div>
</div>

<div class="col">
<div class="card">
<div class="card-body text-center">
<h6>Queue Errors</h6>
<h3>{{ $health['queue_errors'] ?? 0 }}</h3>
</div>
</div>
</div>

<div class="col">
<div class="card">
<div class="card-body text-center">
<h6>Imports Today</h6>
<h3>{{ $health['imports_today'] ?? 0 }}</h3>
</div>
</div>
</div>

<div class="col">
<div class="card">
<div class="card-body text-center">
<h6>Active Suppliers</h6>
<h3>{{ $health['active_suppliers'] ?? 0 }}</h3>
</div>
</div>
</div>

</div>



<div class="card mb-4">

<div class="card-body">

<h5>Queue Progress</h5>

<div class="progress" style="height:25px">

<div class="progress-bar bg-success"
style="width: {{ $progress ?? 0 }}%">

{{ $progress ?? 0 }}%

</div>

</div>

<div class="row text-center mt-3">

<div class="col">
<strong>Pending</strong><br>
{{ $queueStats['pending'] ?? 0 }}
</div>

<div class="col">
<strong>Processing</strong><br>
{{ $queueStats['processing'] ?? 0 }}
</div>

<div class="col">
<strong>Synced</strong><br>
{{ $queueStats['synced'] ?? 0 }}
</div>

<div class="col">
<strong>Errors</strong><br>
{{ $queueStats['error'] ?? 0 }}
</div>

</div>

</div>

</div>



<div class="card mb-4">

<div class="card-body">

<h5>Imports per hour</h5>

<canvas id="importsChart" height="100"></canvas>

</div>

</div>



<div class="mb-3">

<form method="POST" action="/admin/supplier-sync/sync-all">
@csrf

<button class="btn btn-danger">
⚡ Sync All Suppliers
</button>

</form>

</div>



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

<thead class="table-dark">

<tr>

<th><x-sort column="id">ID</x-sort></th>
<th><x-sort column="name">Name</x-sort></th>
<th><x-sort column="prefix">Prefix</x-sort></th>
<th><x-sort column="import_type">Import</x-sort></th>
<th><x-sort column="api_type">API Type</x-sort></th>
<th>API</th>
<th><x-sort column="active">Status</x-sort></th>
<th>Actions</th>

</tr>

</thead>

<tbody>

@forelse($suppliers as $supplier)

@php
$importType = strtolower($supplier->import_type ?? 'api');
$csvSource = strtolower($supplier->csv_source_type ?? 'server');
@endphp

<tr>

<td>{{ $supplier->id }}</td>
<td><strong>{{ $supplier->name }}</strong></td>
<td>{{ $supplier->prefix }}</td>

<td>
{{ strtoupper($importType) }}
<br>
<small style="color:#888">{{ $csvSource }}</small>
</td>

<td>{{ $supplier->api_type ?? '-' }}</td>

<td>
@if($supplier->api_url)
<span class="text-success">configured</span>
@else
<span class="text-muted">-</span>
@endif
</td>

<td>
@if($supplier->active)
<span class="badge bg-success">Active</span>
@else
<span class="badge bg-secondary">Disabled</span>
@endif
</td>

<td>

@if($importType == 'api')

<a href="/admin/supplier-sync/test/{{ $supplier->id }}"
class="btn btn-sm btn-info">
Test API
</a>

<form method="POST"
action="/admin/supplier-sync/sync/{{ $supplier->id }}"
style="display:inline">
@csrf
<button class="btn btn-sm btn-success">
Sync
</button>
</form>

@else

@if($csvSource == 'manual' || $csvSource == 'manual_upload' || $csvSource == 'upload')

<form id="uploadForm{{ $supplier->id }}"
method="POST"
action="/admin/supplier-sync/upload/{{ $supplier->id }}"
enctype="multipart/form-data">

@csrf

<input type="file"
name="file"
id="fileUpload{{ $supplier->id }}"
style="display:none"
onchange="document.getElementById('uploadForm{{ $supplier->id }}').submit();">

</form>

<button type="button"
class="btn btn-sm btn-warning"
onclick="document.getElementById('fileUpload{{ $supplier->id }}').click();">
Upload CSV
</button>

@else

<form method="POST"
action="/admin/supplier-sync/sync/{{ $supplier->id }}"
style="display:inline">
@csrf
<button class="btn btn-sm btn-warning">
Import CSV
</button>
</form>

@endif

@endif

</td>

</tr>

@empty

<tr>
<td colspan="8" class="text-center text-muted">
No suppliers
</td>
</tr>

@endforelse

</tbody>

</table>


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



<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

const labels = [
@foreach($importsPerHour ?? [] as $i)
"{{ $i->hour }}h",
@endforeach
];

const data = [
@foreach($importsPerHour ?? [] as $i)
{{ $i->total }},
@endforeach
];

new Chart(
document.getElementById('importsChart'),
{
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Imports per hour',
data: data,
borderWidth: 2
}]
}
}
);

</script>

@endsection