@extends('partials.layout')

@section('content')
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
    <h2 style="margin:0;">Diferencias</h2>
    <a href="{{ route('diferencias.create') }}" style="background:#2563eb;color:#fff;padding:10px 14px;border-radius:8px;text-decoration:none;">Nueva diferencia</a>
</div>

@if(session('success'))
    <div style="margin-bottom:12px;padding:10px;border:1px solid #bbf7d0;background:#dcfce7;color:#166534;border-radius:8px;">
        {{ session('success') }}
    </div>
@endif

<form method="GET" action="{{ route('diferencias.index') }}" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:12px;">
    <div>
        <label style="display:block;font-weight:700;margin-bottom:6px;font-size:13px;">Fecha desde</label>
        <input type="date" name="fecha_desde" value="{{ request('fecha_desde', now()->toDateString()) }}" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:8px;">
    </div>
    <div>
        <label style="display:block;font-weight:700;margin-bottom:6px;font-size:13px;">Fecha hasta</label>
        <input type="date" name="fecha_hasta" value="{{ request('fecha_hasta', now()->toDateString()) }}" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:8px;">
    </div>
    <div>
        <label style="display:block;font-weight:700;margin-bottom:6px;font-size:13px;">Turno</label>
        <select name="id_turno" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:8px;">
            <option value="">Todos</option>
            @foreach($turnos as $turno)
                <option value="{{ $turno->id_turno }}" {{ (string) request('id_turno') === (string) $turno->id_turno ? 'selected' : '' }}>{{ $turno->turnos ?? $turno->nombre }}</option>
            @endforeach
        </select>
    </div>
    <div>
        <label style="display:block;font-weight:700;margin-bottom:6px;font-size:13px;">Usuario</label>
        <select name="id_usuario" style="width:100%;padding:10px;border:1px solid #e2e8f0;border-radius:8px;">
            <option value="">Todos</option>
            @foreach($usuarios as $usuario)
                <option value="{{ $usuario->id_usuario }}" {{ (string) request('id_usuario') === (string) $usuario->id_usuario ? 'selected' : '' }}>{{ trim(($usuario->nombres ?? '') . ' ' . ($usuario->apellidos ?? '')) ?: $usuario->usuario }}</option>
            @endforeach
        </select>
    </div>
    <div style="display:flex;align-items:end;gap:8px;">
        <button type="submit" class="btn primary" style="padding:10px 14px;border-radius:8px;border:none;background:#2563eb;color:#fff;cursor:pointer;">Filtrar</button>
        <a href="{{ route('diferencias.index') }}" class="btn" style="padding:10px 14px;border-radius:8px;text-decoration:none;background:#f1f5f9;border:1px solid #e2e8f0;">Limpiar</a>
    </div>
</form>

<div style="overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:10px;">
    <table style="width:100%;border-collapse:collapse;">
        <thead style="background:#f8fafc;">
            <tr>
                <th style="text-align:left;padding:10px;border-bottom:1px solid #e5e7eb;">ID</th>
                <th style="text-align:left;padding:10px;border-bottom:1px solid #e5e7eb;">Fecha</th>
                <th style="text-align:left;padding:10px;border-bottom:1px solid #e5e7eb;">Usuario</th>
                <th style="text-align:left;padding:10px;border-bottom:1px solid #e5e7eb;">Observación</th>
                <th style="text-align:left;padding:10px;border-bottom:1px solid #e5e7eb;">Turno</th>
                <th style="text-align:left;padding:10px;border-bottom:1px solid #e5e7eb;">Tipo combustible</th>
                <th style="text-align:right;padding:10px;border-bottom:1px solid #e5e7eb;">Galones</th>
                <th style="text-align:right;padding:10px;border-bottom:1px solid #e5e7eb;">Precio</th>
                <th style="text-align:right;padding:10px;border-bottom:1px solid #e5e7eb;">Total</th>
                <th style="text-align:center;padding:10px;border-bottom:1px solid #e5e7eb;">Estado</th>
                <th style="text-align:center;padding:10px;border-bottom:1px solid #e5e7eb;">Acciones</th>
            </tr>
        </thead>
        <tbody>
            @forelse($items as $item)
                <tr>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;">{{ $item->id }}</td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;">{{ optional($item->created_at)->format('Y-m-d H:i') }}</td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;">{{ $item->usuario?->usuario ?? $item->usuario?->name ?? $item->usuario?->email }}</td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;">{{ $item->observacion }}</td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;">{{ $item->turno->turnos ?? '-' }}</td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;">{{ $item->tipoCombustible->nombre ?? '-' }}</td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;text-align:right;">{{ number_format((float)$item->cantidad_galones, 3) }}</td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;text-align:right;">{{ number_format((float)$item->precio, 2) }}</td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;text-align:right;">{{ number_format((float)$item->total, 2) }}</td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;text-align:center;">
                        @if((int)$item->estado === 1)
                            <span style="padding:4px 8px;border-radius:999px;background:#dcfce7;color:#166534;">Activo</span>
                        @else
                            <span style="padding:4px 8px;border-radius:999px;background:#fee2e2;color:#991b1b;">Inactivo</span>
                        @endif
                    </td>
                    <td style="padding:10px;border-bottom:1px solid #f1f5f9;text-align:center;">
                        <a href="{{ route('diferencias.edit', $item->id) }}" style="color:#2563eb;text-decoration:none;margin-right:8px;">Editar</a>
                        <form method="POST" action="{{ route('diferencias.destroy', $item->id) }}" style="display:inline;" onsubmit="return confirm('¿Eliminar este registro?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" style="border:none;background:transparent;color:#dc2626;cursor:pointer;">Eliminar</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="11" style="padding:14px;text-align:center;color:#64748b;">Sin registros</td>
                </tr>
            @endforelse

            @if($items->isNotEmpty())
                <tr style="background:#f8fafc;font-weight:700;">
                    <td colspan="8" style="padding:10px;text-align:right;">Total</td>
                    <td style="padding:10px;text-align:right;">{{ number_format($totalDiferencias, 2) }}</td>
                    <td></td>
                </tr>
            @endif
        </tbody>
    </table>
</div>
@endsection
