@extends('admin.layouts.app')

@push('css')
<style>
.stat-card .card-body { padding: 1rem 1.25rem; cursor: pointer; }
.stat-card:hover { box-shadow: 0 0 0 2px rgba(13,110,253,.25); }
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Pagos MercadoPago</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.meli.dashboard') }}">MarketPlace</a></li>
                    <li class="breadcrumb-item active">Pagos</li>
                </ol>
            </div>
        </div>
    </div>
</div>

{{-- Stats Cards --}}
<div class="row">
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card" onclick="window.location='{{ route('admin.meli.payments.index') }}'">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-uppercase fw-medium text-muted mb-1" style="font-size:0.8rem">Total</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stats['total']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-primary-subtle rounded fs-3">
                            <i class="ri-bank-card-line text-primary"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card" onclick="filterBy('estado', 'approved')">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-uppercase fw-medium text-muted mb-1" style="font-size:0.8rem">Aprobados</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stats['approved']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-success-subtle rounded fs-3">
                            <i class="ri-checkbox-circle-line text-success"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card" onclick="filterBy('estado', 'pending')">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-uppercase fw-medium text-muted mb-1" style="font-size:0.8rem">Pendientes</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stats['pending']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-warning-subtle rounded fs-3">
                            <i class="ri-time-line text-warning"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card" onclick="filterBy('estado', 'no_aprobados')">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-uppercase fw-medium text-muted mb-1" style="font-size:0.8rem">No Aprobados</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stats['problemas']) }}</h4>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-danger-subtle rounded fs-3">
                            <i class="ri-error-warning-line text-danger"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Origen Breakdown --}}
<div class="row mb-2">
    <div class="col-12">
        <div class="d-flex gap-3 align-items-center">
            <span class="text-muted small">Origen:</span>
            <span class="badge bg-info-subtle text-info cursor-pointer" onclick="filterBy('origen', 'ml')">
                <i class="ri-store-2-line me-1"></i>MercadoLibre: {{ number_format($stats['from_ml']) }}
            </span>
            <span class="badge bg-success-subtle text-success cursor-pointer" onclick="filterBy('origen', 'ecommerce')">
                <i class="ri-links-line me-1"></i>Link de Pago / Otro: {{ number_format($stats['from_ecom']) }}
            </span>
        </div>
    </div>
</div>

{{-- Main Card --}}
<div class="row">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header border-0">
                <div class="d-flex align-items-center">
                    <h5 class="card-title mb-0 flex-grow-1">
                        <i class="ri-bank-card-line text-muted me-1"></i> Listado de Pagos
                    </h5>
                    <div class="flex-shrink-0 d-flex gap-2 align-items-center">
                        <a href="{{ route('admin.meli.payments.reconciliation') }}" class="btn btn-sm btn-outline-primary">
                            <i class="ri-links-line me-1"></i> Conciliacion
                            @if(($stats['unreconciled'] ?? 0) > 0)
                                <span class="badge bg-danger ms-1">{{ $stats['unreconciled'] }}</span>
                            @endif
                        </a>
                        <form id="formImportMP" action="{{ route('admin.meli.payments.fetchFromMP') }}" method="POST" class="d-inline-flex align-items-center gap-2">
                            @csrf
                            <select name="days" class="form-select form-select-sm" style="width:auto">
                                <option value="7" selected>7 días</option>
                                <option value="15">15 días</option>
                                <option value="30">30 días</option>
                                <option value="45">45 días</option>
                                <option value="60">60 días</option>
                                <option value="75">75 días</option>
                                <option value="90">90 días</option>
                                <option value="180">6 meses</option>
                                <option value="365">1 año</option>
                            </select>
                            <button type="button" class="btn btn-sm btn-outline-success" onclick="confirmImportMP()">
                                <i class="ri-download-2-line me-1"></i> Importar de MP
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            {{-- Filters --}}
            <div class="card-body border-top border-bottom py-3">
                <form method="GET" action="{{ route('admin.meli.payments.index') }}" class="row g-3 align-items-end">
                    <div class="col-md-2">
                        <label class="form-label small">Estado</label>
                        <select name="estado" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Todos</option>
                            <option value="approved" {{ request('estado') == 'approved' ? 'selected' : '' }}>Aprobado</option>
                            <option value="PAGAD" {{ request('estado') == 'PAGAD' ? 'selected' : '' }}>Pagado</option>
                            <option value="pending" {{ request('estado') == 'pending' ? 'selected' : '' }}>Pendiente</option>
                            <option value="rejected" {{ request('estado') == 'rejected' ? 'selected' : '' }}>Rechazado</option>
                            <option value="no_aprobados" {{ request('estado') == 'no_aprobados' ? 'selected' : '' }}>No Aprobados</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Conciliacion</label>
                        <select name="reconciled" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Todos</option>
                            <option value="yes" {{ request('reconciled') == 'yes' ? 'selected' : '' }}>Conciliados</option>
                            <option value="no" {{ request('reconciled') == 'no' ? 'selected' : '' }}>Sin conciliar</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label small">Origen</label>
                        <select name="origen" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">Todos</option>
                            <option value="ml" {{ request('origen') == 'ml' ? 'selected' : '' }}>MercadoLibre</option>
                            <option value="ecommerce" {{ request('origen') == 'ecommerce' ? 'selected' : '' }}>Link de Pago</option>
                            <option value="otro" {{ request('origen') == 'otro' ? 'selected' : '' }}>Otro</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label small">Buscar</label>
                        <div class="input-group input-group-sm">
                            <input type="text" name="search" class="form-control" placeholder="ID, transacción, nick, nombre, email, publicación..."
                                   value="{{ request('search') }}">
                            <button type="submit" class="btn btn-primary"><i class="ri-search-line"></i></button>
                        </div>
                    </div>
                    <div class="col-md-2">
                        @if(request()->hasAny(['estado', 'search', 'reconciled', 'origen']))
                            <a href="{{ route('admin.meli.payments.index') }}" class="btn btn-sm btn-outline-secondary w-100">
                                <i class="ri-close-line"></i> Limpiar
                            </a>
                        @endif
                    </div>
                </form>
            </div>

            {{-- Table --}}
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-striped align-middle table-nowrap mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Payment ID</th>
                                <th>Pagador</th>
                                <th class="text-center">Origen</th>
                                <th>Publicación</th>
                                <th class="text-end">Total</th>
                                <th class="text-end">Fee MP</th>
                                <th class="text-end">Neto</th>
                                <th class="text-center">Estado</th>
                                <th class="text-center">Concil.</th>
                                <th>Fecha</th>
                                <th>Hora</th>
                                <th width="80">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($payments as $payment)
                            <tr>
                                <td>
                                    <span class="fw-medium font-monospace">{{ $payment->id_payment }}</span>
                                </td>
                                <td>
                                    <strong>{{ $payment->mla_nick ?? '-' }}</strong>
                                    @if($payment->payer_full_name)
                                        <br><small class="text-muted">{{ $payment->payer_full_name }}</small>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-{{ $payment->origen_color }}-subtle text-{{ $payment->origen_color }}">
                                        @if($payment->origen === 'ml')
                                            <i class="ri-store-2-line me-1"></i>
                                        @elseif($payment->origen === 'ecommerce')
                                            <i class="ri-links-line me-1"></i>
                                        @endif
                                        {{ $payment->origen_label }}
                                    </span>
                                </td>
                                <td>
                                    <span class="font-monospace small">{{ $payment->mla_publ ?? '-' }}</span>
                                </td>
                                <td class="text-end">
                                    <strong>${{ number_format($payment->mla_total ?? 0, 2, ',', '.') }}</strong>
                                </td>
                                <td class="text-end text-danger">
                                    ${{ number_format($payment->mpg_fee ?? 0, 2, ',', '.') }}
                                </td>
                                <td class="text-end text-success">
                                    <strong>${{ number_format($payment->net_amount, 2, ',', '.') }}</strong>
                                </td>
                                <td class="text-center">
                                    @switch($payment->estado)
                                        @case('approved')
                                        @case('PAGAD')
                                            <span class="badge bg-success">{{ $payment->estado }}</span>
                                            @break
                                        @case('pending')
                                            <span class="badge bg-warning">Pendiente</span>
                                            @break
                                        @case('rejected')
                                            <span class="badge bg-danger">Rechazado</span>
                                            @break
                                        @case('refunded')
                                            <span class="badge bg-info">Devuelto</span>
                                            @break
                                        @case('cancelled')
                                            <span class="badge bg-secondary">Cancelado</span>
                                            @break
                                        @default
                                            <span class="badge bg-secondary">{{ $payment->estado }}</span>
                                    @endswitch
                                </td>
                                <td class="text-center">
                                    @if($payment->reconciled)
                                        <span class="badge bg-success-subtle text-success" title="Orden #{{ $payment->order_id }} ({{ $payment->reconciliation_method }})">
                                            <i class="ri-links-line"></i> #{{ $payment->order_id }}
                                        </span>
                                    @elseif(in_array($payment->estado, ['approved', 'PAGAD']))
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <small>{{ $payment->fecha_pago ? $payment->fecha_pago->format('d/m/Y') : '-' }}</small>
                                </td>
                                <td>
                                    <small>{{ $payment->fecha_pago ? $payment->fecha_pago->format('H:i') : '-' }}</small>
                                </td>
                                <td>
                                    <a href="{{ route('admin.meli.payments.show', $payment->id) }}" class="btn btn-sm btn-primary" title="Ver detalle">
                                        <i class="ri-eye-line"></i>
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="12">
                                    <div class="text-center py-4">
                                        <i class="ri-bank-card-line d-block fs-1 text-muted mb-2"></i>
                                        <h6 class="text-muted">No hay pagos registrados</h6>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($payments->hasPages())
                    <div class="d-flex justify-content-between align-items-center p-3">
                        <div class="text-muted small">
                            Mostrando {{ $payments->firstItem() }} a {{ $payments->lastItem() }} de {{ $payments->total() }}
                        </div>
                        <div>{{ $payments->links() }}</div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
function filterBy(key, value) {
    const url = new URL(window.location.href);
    url.searchParams.set(key, value);
    window.location.href = url.toString();
}

function confirmImportMP() {
    var days = document.querySelector('#formImportMP select[name="days"]').value;
    var label = document.querySelector('#formImportMP select[name="days"] option:checked').text;
    Swal.fire({
        title: 'Importar pagos de MercadoPago',
        html: 'Se importarán todos los pagos de los últimos <strong>' + label + '</strong>.<br>Incluye pagos de ML, links de pago y otros.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#0ab39c',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, importar',
        cancelButtonText: 'Cancelar'
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Importando pagos...',
                html: 'Consultando la API de MercadoPago.<br>Esto puede tardar unos segundos.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() {
                    Swal.showLoading();
                }
            });
            document.getElementById('formImportMP').submit();
        }
    });
}
</script>
@endpush