@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

<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;">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;">{{ $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="9" style="padding:14px;text-align:center;color:#64748b;">Sin registros</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection
