@extends('layouts.layouts')
@section('title', 'Gestión de Recargas')

@section('styles')
<style>
    .container-custom {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px;
    }

    .card-recarga {
        background-color: #fff;
        padding: 24px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .alert {
        padding: 16px;
        margin-bottom: 16px;
        border-left: 4px solid;
        border-radius: 4px;
    }

    .alert-success {
        background-color: #d1fae5;
        border-color: #10b981;
        color: #065f46;
    }

    .alert-error {
        background-color: #fee2e2;
        border-color: #ef4444;
        color: #b91c1c;
    }

    .button-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end; /* Alinea el buscador a la derecha */
        align-items: center;
        margin-bottom: 16px;
        gap: 10px;
    }

    .btn-link {
        padding: 8px 16px;
        font-weight: bold;
        border-radius: 8px;
        transition: background-color 0.3s ease;
        color: white;
        text-decoration: none;
    }
    
    .btn-link:hover {
        text-decoration: none;
        color: white;
    }

    .search-form {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 300px;
        gap: 8px;
    }

    .search-input {
        border: 1px solid #d1d5db;
        border-radius: 8px;
        padding: 8px;
        flex: 1;
        width: 100%;
    }

    .search-button {
        padding: 8px 16px;
        background-color: #4b5563;
        color: white;
        font-weight: bold;
        border-radius: 8px;
        transition: background-color 0.3s ease;
        border: none;
    }

    .search-button:hover {
        background-color: #374151;
    }

    .table-container {
        overflow-x: auto;
    }

    .recarga-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 16px;
    }

    .recarga-table thead {
        background-color: #f9fafb;
    }

    .recarga-table th {
        padding: 12px 24px;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 500;
        color: #6b7280;
        text-transform: uppercase;
        border-bottom: 1px solid #e5e7eb;
    }

    .recarga-table td {
        padding: 16px 24px;
        white-space: nowrap;
        font-size: 0.875rem;
        color: #1f2937;
        border-bottom: 1px solid #e5e7eb;
    }

    .recarga-table tbody tr:last-child td {
        border-bottom: none;
    }

    .link-edit {
        color: #4f46e5;
        font-weight: 500;
    }

    .link-edit:hover {
        color: #3730a3;
    }
    
    .pagination {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
    }

    .pagination a, .pagination span {
        padding: 8px 12px;
        margin: 0 2px;
        border-radius: 4px;
        text-decoration: none;
        color: #4b5563;
        border: 1px solid #d1d5db;
    }
    
    .pagination a:hover {
        background-color: #e5e7eb;
    }

    .pagination span.active {
        background-color: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    .text-center {
        text-align: center;
    }
</style>
@endsection

@section('mainPage')
<div class="container-custom">
    <div class="card-recarga">
        <h2 style="font-size: 1.5rem; font-weight: 600; color: #1f2937; margin-bottom: 16px;">
            {{ __('Gestión de Recargas') }}
        </h2>

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

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

        <div class="button-bar">
            <div class="search-form">
                <form action="{{ route('recargas.index') }}" method="GET" style="display: flex; width: 100%; gap: 8px;">
                    <input type="text" name="search" placeholder="Buscar por PCP, Placa o Cédula..." value="{{ request('search') }}" class="search-input">
                    <button type="submit" class="search-button">
                        Buscar
                    </button>
                </form>
            </div>
        </div>

        <div class="table-container">
            <table class="recarga-table">
                <thead>
                    <tr>
                        <th>PCP</th>
                        <th>Placa</th>
                        <th>Cédula</th>
                        <th>Litros</th>
                        <th>Fecha</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recargas as $recarga)
                    <tr>
                        <td>{{ $recarga->pcp->nombre_completo ?? 'N/A' }}</td>
                        <td>{{ $recarga->vehiculo->placa ?? 'N/A' }}</td>
                        <td>{{ $recarga->vehiculo->cedula ?? 'N/A' }}</td>
                        <td>{{ number_format($recarga->litros, 2) }} L</td>
                        <td>{{ \Carbon\Carbon::parse($recarga->fecha)->format('d/m/Y') }}</td>
                        <td style="text-align: right;">
                            <a href="{{ route('recargas.edit', $recarga->id) }}" class="link-edit">Editar</a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center">
                            No hay recargas registradas que coincidan con la búsqueda.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($recargas->links())
            <div class="pagination">
                {{ $recargas->links() }}
            </div>
        @endif
    </div>
</div>
@endsection