@extends('layout.mainlayout')
@section('content')

<div class="page-wrapper cardhead">
<div class="content container-fluid">

@component('components.breadcrumb')
@slot('title')
Biometric Delete Logs
@endslot
@endcomponent

<div class="row">
<div class="col-xl-12">
<div class="card">

<div class="card-header">
    <h5 class="card-title">Biometric Synchronization Monitor</h5>
</div>

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

{{-- 🔍 FILTER BAR --}}
<form method="GET" class="grid md:grid-cols-6 gap-3 mb-4">

<input type="text" name="employee" value="{{ request('employee') }}"
       placeholder="Employee code/name"
       class="border rounded p-2 md:col-span-2">

<select name="status" class="border rounded p-2">
    <option value="">All Status</option>
    <option value="pending" @selected(request('status')=='pending')>Pending</option>
    <option value="success" @selected(request('status')=='success')>Success</option>
    <option value="failed"  @selected(request('status')=='failed')>Failed</option>
</select>

<input type="date" name="from" value="{{ request('from') }}" class="border rounded p-2">
<input type="date" name="to" value="{{ request('to') }}" class="border rounded p-2">

<select name="per_page" class="border rounded p-2">
@foreach([25,50,100] as $pp)
<option value="{{ $pp }}" @selected(request('per_page',50)==$pp)>
    {{ $pp }}/page
</option>
@endforeach
</select>

<div class="md:col-span-6 flex gap-2">
    <button class="px-3 py-2 bg-indigo-600 text-white rounded">
        Apply
    </button>
    <a href="{{ route('biometric-sync-logs') }}"
       class="px-3 py-2 bg-gray-200 rounded">
        Reset
    </a>
</div>

</form>

{{-- 📊 TABLE --}}
<div class="overflow-auto border rounded">
<table class="min-w-full text-sm">

<thead class="bg-gray-50">
<tr>
    <th class="p-4 text-left">Employee</th>
    <th class="p-4 text-left">Location</th>
    <th class="p-4 text-left">Status</th>
    <th class="p-4 text-left">Attempts</th>
    <th class="p-4 text-left">Last Attempt</th>
    <th class="p-4 text-left">Action</th>
</tr>
</thead>

<tbody>
@forelse($logs as $log)
<tr class="border-t">

<td class="p-4">
    <strong>{{ $log->employee_code }}</strong><br>
    <span class="text-xs text-gray-500">
        {{ $log->employee_name }}
    </span>
</td>

<td class="p-4">{{ $log->location }}</td>

<td class="p-4">
@if($log->status === 'success')
    <span class="badge bg-success">SUCCESS</span>
@elseif($log->status === 'pending')
    <span class="badge bg-warning text-dark">PENDING</span>
@else
    <span class="badge bg-danger">FAILED</span>
@endif
</td>

<td class="p-4">{{ $log->attempts }}</td>

<td class="p-4">
{{ $log->last_attempt_at ?? '—' }}
</td>

<td class="p-4">
@if($log->status === 'failed')
    <a href="{{ route('biometric.delete.retry', $log->id) }}"
       class="btn btn-sm btn-warning"
       onclick="return confirm('Retry biometric delete?')">
        🔁 Retry
    </a>
@endif


</td>

</tr>
@empty
<tr>
<td colspan="6" class="p-4 text-center text-gray-500">
No biometric delete logs found
</td>
</tr>
@endforelse
</tbody>

</table>
</div>

{{-- 📄 PAGINATION --}}
<div class="mt-3">
    {{ $logs->links('pagination::bootstrap-5') }}
</div>

<p class="text-xs text-gray-500 mt-2">
System delete activity monitor
</p>

</div>
</div>
</div>
</div>
</div>

</div>
</div>
@endsection