@extends('layouts.app')

@section('title', 'Aprobación de Pagos Reportados')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark">
                <i class="fas fa-money-check-alt me-2 text-success"></i>Aprobación de Pagos Reportados
            </h1>
            <p class="text-muted mb-0 small">Pagos reportados por vendedores desde la PWA móvil pendientes de verificación</p>
        </div>
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif
    
    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    {{-- Notificación WhatsApp --}}
    @if(session('whatsapp_link'))
        <div class="alert alert-info alert-dismissible fade show d-flex justify-content-between align-items-center" role="alert">
            <div>
                <i class="fab fa-whatsapp me-2"></i>
                <span>¡El pago fue registrado! ¿Quieres notificar al cliente por WhatsApp?</span>
            </div>
            <a href="{{ session('whatsapp_link') }}" target="_blank" class="btn btn-success btn-sm ms-3">
                <i class="fab fa-whatsapp me-1"></i> Enviar Notificación por WhatsApp
            </a>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Estadísticas -->
    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="stat-card stat-card-warning">
                <div class="stat-card-icon">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Pendientes</div>
                    <div class="stat-card-value">{{ $stats['pending_count'] }}</div>
                    <div class="stat-card-subvalue">${{ number_format($stats['pending_total_usd'], 2) }} USD</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="stat-card stat-card-success">
                <div class="stat-card-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Aprobados</div>
                    <div class="stat-card-value">{{ $stats['approved_count'] }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="stat-card stat-card-danger">
                <div class="stat-card-icon">
                    <i class="fas fa-times-circle"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Rechazados</div>
                    <div class="stat-card-value">{{ $stats['rejected_count'] }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="stat-card stat-card-info">
                <div class="stat-card-icon">
                    <i class="fas fa-dollar-sign"></i>
                </div>
                <div class="stat-card-content">
                    <div class="stat-card-label">Monto Pendiente</div>
                    <div class="stat-card-value">${{ number_format($stats['pending_total_usd'], 2) }}</div>
                    <div class="stat-card-subvalue">USD</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.sales.payment_verifications.index') }}" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Cliente</label>
                    <select name="client_id" class="form-select">
                        <option value="">Todos</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}" {{ request('client_id') == $client->id ? 'selected' : '' }}>
                                {{ $client->business_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Vendedor</label>
                    <select name="salesman_id" class="form-select">
                        <option value="">Todos</option>
                        @foreach($salesmen as $salesman)
                            <option value="{{ $salesman->id }}" {{ request('salesman_id') == $salesman->id ? 'selected' : '' }}>
                                {{ $salesman->first_name }} {{ $salesman->last_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Desde</label>
                    <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Hasta</label>
                    <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-filter me-1"></i>Filtrar
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Tabla de Pagos Pendientes -->
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">
                <i class="fas fa-list me-2"></i>Pagos Pendientes de Aprobación
            </h5>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Fecha Pago</th>
                            <th>Cliente</th>
                            <th>Factura</th>
                            <th>Vendedor</th>
                            <th>Monto Local</th>
                            <th>Tasa Reportada</th>
                            <th class="text-end">Monto USD</th>
                            <th>Método</th>
                            <th>Referencia</th>
                            <th class="text-center">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pendingPayments as $payment)
                        <tr>
                            <td>{{ \Carbon\Carbon::parse($payment->payment_date)->format('d/m/Y') }}</td>
                            <td>
                                <strong>{{ $payment->client->business_name ?? 'N/A' }}</strong>
                                @if($payment->client->tax_id)
                                    <br><small class="text-muted">RIF: {{ $payment->client->tax_id }}</small>
                                @endif
                            </td>
                            <td>
                                @if($payment->salesInvoice)
                                    <a href="{{ route('admin.sales.invoices.show', $payment->salesInvoice->id) }}" target="_blank" class="text-primary">
                                        {{ $payment->salesInvoice->invoice_number }}
                                    </a>
                                    @if($payment->salesInvoice->accountsReceivable->first())
                                        <br><small class="text-muted">Saldo: ${{ number_format($payment->salesInvoice->accountsReceivable->first()->current_balance, 2) }} USD</small>
                                    @endif
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td>
                                @if($payment->salesman)
                                    {{ $payment->salesman->first_name }} {{ $payment->salesman->last_name }}
                                    @if($payment->salesman->code)
                                        <br><small class="text-muted">Código: {{ $payment->salesman->code }}</small>
                                    @endif
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td>
                                <strong>{{ $payment->payment_currency }}</strong> 
                                {{ number_format($payment->monto_pagado_local, 2) }}
                            </td>
                            <td>
                                1 USD = {{ number_format($payment->tasa_reportada, 2) }}
                            </td>
                            <td class="text-end">
                                <strong class="text-success">${{ number_format($payment->monto_calculado_usd, 2) }}</strong>
                                <br><small class="text-muted">USD</small>
                            </td>
                            <td>
                                <span class="badge bg-info">
                                    {{ ucfirst(str_replace('_', ' ', $payment->payment_method ?? 'N/A')) }}
                                </span>
                            </td>
                            <td>
                                {{ $payment->reference_number ?? '-' }}
                            </td>
                            <td class="text-center">
                                <div class="btn-group" role="group">
                                    <form action="{{ route('admin.sales.payment_verifications.approve', $payment->id) }}" method="POST" style="display: inline-block;">
                                        @csrf
                                        <button type="submit" class="btn btn-success btn-sm" 
                                                onclick="return confirm('¿Está seguro de APROBAR este pago de ${{ number_format($payment->monto_calculado_usd, 2) }} USD?')">
                                            <i class="fas fa-check me-1"></i>Aprobar
                                        </button>
                                    </form>

                                    <button type="button" class="btn btn-danger btn-sm" 
                                            data-bs-toggle="modal" 
                                            data-bs-target="#rejectModal-{{ $payment->id }}">
                                        <i class="fas fa-times me-1"></i>Rechazar
                                    </button>
                                </div>

                                <!-- Modal para Rechazar -->
                                <div class="modal fade" id="rejectModal-{{ $payment->id }}" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel-{{ $payment->id }}" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header bg-danger text-white">
                                                <h5 class="modal-title" id="rejectModalLabel-{{ $payment->id }}">
                                                    <i class="fas fa-times-circle me-2"></i>Rechazar Pago
                                                </h5>
                                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <form action="{{ route('admin.sales.payment_verifications.reject', $payment->id) }}" method="POST">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="alert alert-warning">
                                                        <i class="fas fa-exclamation-triangle me-2"></i>
                                                        <strong>¿Está seguro de RECHAZAR este pago?</strong>
                                                    </div>
                                                    <div class="mb-3">
                                                        <strong>Detalles del pago:</strong>
                                                        <ul class="mb-0 mt-2">
                                                            <li>Cliente: {{ $payment->client->business_name ?? 'N/A' }}</li>
                                                            <li>Monto: {{ $payment->payment_currency }} {{ number_format($payment->monto_pagado_local, 2) }} (${{ number_format($payment->monto_calculado_usd, 2) }} USD)</li>
                                                            <li>Fecha: {{ \Carbon\Carbon::parse($payment->payment_date)->format('d/m/Y') }}</li>
                                                            <li>Referencia: {{ $payment->reference_number ?? 'N/A' }}</li>
                                                        </ul>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="motivo_rechazo-{{ $payment->id }}" class="form-label">
                                                            <strong>Motivo del Rechazo <span class="text-danger">*</span></strong>
                                                        </label>
                                                        <textarea name="motivo_rechazo" id="motivo_rechazo-{{ $payment->id }}" 
                                                                  class="form-control" rows="3" 
                                                                  placeholder="Ingrese el motivo del rechazo..." required></textarea>
                                                        <small class="form-text text-muted">Este motivo será visible para el vendedor.</small>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                                        <i class="fas fa-times me-1"></i>Cancelar
                                                    </button>
                                                    <button type="submit" class="btn btn-danger">
                                                        <i class="fas fa-ban me-1"></i>Confirmar Rechazo
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="10" class="text-center py-5">
                                <div class="text-muted">
                                    <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                                    <p class="mb-0">No hay pagos pendientes de verificación.</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if($pendingPayments->hasPages())
        <div class="card-footer">
            <div class="d-flex justify-content-center">
                {{ $pendingPayments->links() }}
            </div>
        </div>
        @endif
    </div>
</div>
@endsection

@push('styles')
<style>
    .stat-card {
        background: #fff;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .stat-card-icon {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: white;
    }
    .stat-card-primary .stat-card-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .stat-card-success .stat-card-icon { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
    .stat-card-warning .stat-card-icon { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .stat-card-danger .stat-card-icon { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
    .stat-card-info .stat-card-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .stat-card-content {
        flex: 1;
    }
    .stat-card-label {
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.25rem;
    }
    .stat-card-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: #2c3e50;
    }
    .stat-card-subvalue {
        font-size: 0.75rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }
</style>
@endpush