@extends('client.layouts.app')

@section('content')
    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h4 class="card-title mb-0">Mis Facturas</h4>
                </div>
                <div class="col-md-6">
                    <div class="row g-2">
                        <div class="col-md-4">
                            <div class="bg-primary-subtle p-3 rounded text-center">
                                <small class="text-muted d-block">Total Facturado</small>
                                <strong>${{ number_format($totalFacturado, 2) }}</strong>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="bg-danger-subtle p-3 rounded text-center">
                                <small class="text-muted d-block">Pendiente</small>
                                <strong class="text-danger">${{ number_format($totalPendiente, 2) }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <!-- Filtros -->
            <form method="GET" class="row g-3 mb-4">
                <div class="col-md-3">
                    <select name="estatus" class="form-select">
                        <option value="">Todos los estados</option>
                        <option value="pagado" {{ request('estatus') == 'pagado' ? 'selected' : '' }}>Pagadas</option>
                        <option value="pendiente" {{ request('estatus') == 'pendiente' ? 'selected' : '' }}>Pendientes</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <input type="date" name="fecha_desde" class="form-control" placeholder="Desde" value="{{ request('fecha_desde') }}">
                </div>
                <div class="col-md-3">
                    <input type="date" name="fecha_hasta" class="form-control" placeholder="Hasta" value="{{ request('fecha_hasta') }}">
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary">Filtrar</button>
                    <a href="{{ route('client.invoices.index') }}" class="btn btn-outline-secondary">Limpiar</a>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Folio</th>
                            <th>UUID</th>
                            <th>Total</th>
                            <th>Pagado</th>
                            <th>Pendiente</th>
                            <th>Metodo Pago</th>
                            <th>Fecha</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($facturas as $factura)
                            <tr>
                                <td>{{ $factura->folio }}</td>
                                <td>
                                    <small>{{ Str::limit($factura->uuid, 20) }}</small>
                                </td>
                                <td>${{ number_format($factura->total, 2) }}</td>
                                <td class="text-success">${{ number_format($factura->saldo_pagado, 2) }}</td>
                                <td>
                                    @if($factura->saldo_pendiente > 0)
                                        <span class="text-danger">${{ number_format($factura->saldo_pendiente, 2) }}</span>
                                    @else
                                        <span class="badge bg-success">Pagado</span>
                                    @endif
                                </td>
                                <td>{{ $factura->metodo_pago }}</td>
                                <td>{{ $factura->created_at->format('d/m/Y') }}</td>
                                <td>
                                    <a href="{{ route('client.invoices.show', $factura->id) }}" class="btn btn-sm btn-info" title="Ver">
                                        <svg width="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="currentColor"></path>
                                            <path opacity="0.4" d="M21.87 11.5C21.23 10.39 17.71 4.82 11.73 5C6.2 5.14 3 10 2.13 11.5C2.04 11.66 2 11.83 2 12C2 12.17 2.04 12.34 2.13 12.5C2.76 13.59 6.13 18.8 12 19C12.13 19 12.26 19 12.39 19C17.71 19 21.09 13.73 21.87 12.5C22.04 12.17 22.04 11.83 21.87 11.5Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                    <a href="{{ route('client.invoices.pdf', $factura->id) }}" class="btn btn-sm btn-danger" title="PDF">
                                        <svg width="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path opacity="0.4" d="M16.191 2H7.81C4.77 2 3 3.78 3 6.83V17.16C3 20.26 4.77 22 7.81 22H16.191C19.28 22 21 20.26 21 17.16V6.83C21 3.78 19.28 2 16.191 2Z" fill="currentColor"></path>
                                            <path d="M12.678 14.678L14.298 13.058V17.058C14.298 17.468 14.638 17.808 15.048 17.808C15.458 17.808 15.798 17.468 15.798 17.058V13.058L17.418 14.678C17.568 14.828 17.758 14.898 17.958 14.898C18.158 14.898 18.348 14.828 18.498 14.678C18.788 14.388 18.788 13.908 18.498 13.618L15.588 10.708C15.298 10.418 14.818 10.418 14.528 10.708L11.618 13.618C11.328 13.908 11.328 14.388 11.618 14.678C11.908 14.968 12.388 14.968 12.678 14.678Z" fill="currentColor"></path>
                                        </svg>
                                    </a>
                                    <a href="{{ route('client.invoices.xml', $factura->id) }}" class="btn btn-sm btn-success" title="XML">
                                        XML
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="text-center text-muted py-4">No hay facturas</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            {{ $facturas->appends(request()->query())->links() }}
        </div>
    </div>
@endsection