@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); }
.reconciliation-table { max-height: 520px; overflow-y: auto; }
.reconciliation-table table { margin-bottom: 0; }
.reconciliation-table thead { position: sticky; top: 0; z-index: 1; }
</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">Conciliacion 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"><a href="{{ route('admin.meli.payments.index') }}">Pagos</a></li>
                    <li class="breadcrumb-item active">Conciliacion</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', ['reconciled' => 'yes']) }}'">
            <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">Conciliados</p>
                        <h4 class="fs-20 fw-semibold mb-0">{{ number_format($stats['reconciled_count']) }}</h4>
                        <small class="text-muted">${{ number_format($stats['reconciled_sum'], 2, ',', '.') }}</small>
                    </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="window.location='{{ route('admin.meli.payments.index', ['reconciled' => 'no']) }}'">
            <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">Sin Conciliar</p>
                        <h4 class="fs-20 fw-semibold mb-0 text-danger">{{ number_format($stats['unreconciled_count']) }}</h4>
                        <small class="text-muted">${{ number_format($stats['unreconciled_sum'], 2, ',', '.') }}</small>
                    </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 class="col-xl-3 col-md-6">
        <div class="card card-animate stat-card" onclick="document.getElementById('orders-table').scrollIntoView({behavior:'smooth'})">
            <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">Ordenes sin Match</p>
                        <h4 class="fs-20 fw-semibold mb-0 text-warning">{{ number_format($stats['unmatched_orders']) }}</h4>
                        <small class="text-muted">ultimos 90 dias</small>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-warning-subtle rounded fs-3">
                            <i class="ri-shopping-cart-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="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">Ultima Conciliacion</p>
                        <h4 class="fs-20 fw-semibold mb-0">
                            {{ $stats['last_reconciled_at'] ? $stats['last_reconciled_at']->format('d/m/Y') : '-' }}
                        </h4>
                        <small class="text-muted">
                            {{ $stats['last_reconciled_at'] ? $stats['last_reconciled_at']->format('H:i') : 'Nunca' }}
                        </small>
                    </div>
                    <div class="avatar-sm">
                        <span class="avatar-title bg-info-subtle rounded fs-3">
                            <i class="ri-calendar-line text-info"></i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Auto-reconcile Action --}}
@if($unreconciledPayments->count() > 0)
<div class="row mb-3">
    <div class="col-12">
        <form id="formAutoReconcile" action="{{ route('admin.meli.payments.autoReconcile') }}" method="POST">
            @csrf
            <button type="button" class="btn btn-primary" onclick="confirmAutoReconcile()">
                <i class="ri-links-line me-1"></i> Auto-Conciliar ({{ $unreconciledPayments->count() }} pagos)
            </button>
            <a href="{{ route('admin.meli.payments.index') }}" class="btn btn-outline-secondary ms-2">
                <i class="ri-arrow-left-line me-1"></i> Volver a Pagos
            </a>
        </form>
    </div>
</div>
@endif

{{-- Two Column Layout --}}
<div class="row">
    {{-- Left: Pagos sin conciliar --}}
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header border-0">
                <h5 class="card-title mb-0">
                    <i class="ri-bank-card-line text-danger me-1"></i>
                    Pagos MP sin Conciliar
                    <span class="badge bg-danger-subtle text-danger ms-1">{{ $unreconciledPayments->count() }}</span>
                    @if($stats['unreconciled_ml'] > 0)
                        <span class="badge bg-info-subtle text-info ms-1" title="De MercadoLibre">ML: {{ $stats['unreconciled_ml'] }}</span>
                    @endif
                    @if($stats['unreconciled_ecom'] > 0)
                        <span class="badge bg-success-subtle text-success ms-1" title="Links de Pago">LP: {{ $stats['unreconciled_ecom'] }}</span>
                    @endif
                </h5>
            </div>
            <div class="card-body p-0">
                <div class="reconciliation-table">
                    <table class="table table-hover table-striped align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Payment ID</th>
                                <th>Pagador</th>
                                <th class="text-center">Origen</th>
                                <th class="text-end">Total</th>
                                <th>Fecha</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($unreconciledPayments as $payment)
                            <tr id="payment-row-{{ $payment->id }}">
                                <td>
                                    <span class="fw-medium font-monospace small">{{ $payment->id_payment }}</span>
                                    @if($payment->mla_tran)
                                        <br><span class="text-muted small">{{ Str::limit($payment->mla_tran, 18) }}</span>
                                    @endif
                                </td>
                                <td>
                                    <strong class="small">{{ $payment->mla_nick ?? $payment->payer_full_name ?? '-' }}</strong>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-{{ $payment->origen_color }}-subtle text-{{ $payment->origen_color }}">
                                        {{ $payment->origen === 'ml' ? 'ML' : ($payment->origen === 'ecommerce' ? 'LP' : '?') }}
                                    </span>
                                </td>
                                <td class="text-end">
                                    <strong>${{ number_format($payment->mla_total ?? 0, 2, ',', '.') }}</strong>
                                </td>
                                <td>
                                    <small>{{ $payment->fecha_pago ? $payment->fecha_pago->format('d/m/y H:i') : '-' }}</small>
                                </td>
                                <td>
                                    <div class="d-flex gap-1 justify-content-center">
                                        <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>
                                        <button type="button" class="btn btn-sm btn-outline-success" title="Auto-conciliar"
                                                onclick="reconcileSingle({{ $payment->id }})">
                                            <i class="ri-links-line"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-primary" title="Vincular manual"
                                                onclick="showManualModal({{ $payment->id }}, '{{ $payment->id_payment }}', {{ $payment->mla_total ?? 0 }})">
                                            <i class="ri-link-m"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7">
                                    <div class="text-center py-4">
                                        <i class="ri-checkbox-circle-line d-block fs-1 text-success mb-2"></i>
                                        <h6 class="text-success">Todos los pagos estan conciliados</h6>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Right: Ordenes sin match --}}
    <div class="col-lg-5" id="orders-table">
        <div class="card">
            <div class="card-header border-0">
                <h5 class="card-title mb-0">
                    <i class="ri-shopping-cart-line text-warning me-1"></i>
                    Ordenes MP sin Match
                    <span class="badge bg-warning-subtle text-warning ms-1">{{ $unmatchedOrders->count() }}</span>
                </h5>
            </div>
            <div class="card-body p-0">
                <div class="reconciliation-table">
                    <table class="table table-hover table-striped align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Cliente</th>
                                <th class="text-end">Total</th>
                                <th>Fecha</th>
                                <th class="text-center">Pago</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($unmatchedOrders as $order)
                            <tr>
                                <td>
                                    <a href="{{ route('orders.detail', $order->id) }}" class="fw-medium font-monospace small">#{{ $order->id }}</a>
                                </td>
                                <td>
                                    <strong class="small">{{ $order->first_name }} {{ $order->last_name }}</strong>
                                    @if($order->email)
                                        <br><small class="text-muted">{{ Str::limit($order->email, 25) }}</small>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <strong>${{ number_format($order->grand_total, 2, ',', '.') }}</strong>
                                </td>
                                <td>
                                    <small>{{ $order->created_at->format('d/m/y H:i') }}</small>
                                </td>
                                <td class="text-center">
                                    @if($order->payment_status === 'paid')
                                        <span class="badge bg-success">Pagada</span>
                                    @else
                                        <span class="badge bg-warning">{{ $order->payment_status }}</span>
                                    @endif
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5">
                                    <div class="text-center py-4">
                                        <i class="ri-checkbox-circle-line d-block fs-1 text-success mb-2"></i>
                                        <h6 class="text-success">Todas las ordenes tienen pago</h6>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Modal Conciliacion Manual --}}
<div class="modal fade" id="manualReconcileModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="ri-link-m me-1"></i> Conciliacion Manual</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted">
                    Vincular pago <strong id="modalPaymentId"></strong>
                    (<strong id="modalPaymentAmount"></strong>) con una orden:
                </p>
                <div class="mb-3">
                    <label class="form-label">Numero de Orden</label>
                    <input type="number" id="manualOrderId" class="form-control" placeholder="Ej: 123" min="1">
                </div>
                @if($unmatchedOrders->count() > 0)
                <div class="mb-3">
                    <label class="form-label small text-muted">O seleccionar de las ordenes sin match:</label>
                    <select id="manualOrderSelect" class="form-select form-select-sm" onchange="document.getElementById('manualOrderId').value = this.value">
                        <option value="">-- Seleccionar --</option>
                        @foreach($unmatchedOrders as $order)
                            <option value="{{ $order->id }}">
                                #{{ $order->id }} - ${{ number_format($order->grand_total, 2, ',', '.') }} - {{ $order->first_name }} {{ $order->last_name }} ({{ $order->created_at->format('d/m/Y') }})
                            </option>
                        @endforeach
                    </select>
                </div>
                @endif
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="submitManualReconcile()">
                    <i class="ri-links-line me-1"></i> Vincular
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
var currentPaymentId = null;

function confirmAutoReconcile() {
    Swal.fire({
        title: 'Auto-Conciliar Pagos',
        html: 'Se intentara conciliar automaticamente <strong>{{ $unreconciledPayments->count() }}</strong> pagos con ordenes del sistema.<br><br>Metodos: Payment ID, referencia externa, monto+fecha.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#0ab39c',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Si, conciliar',
        cancelButtonText: 'Cancelar'
    }).then(function(result) {
        if (result.isConfirmed) {
            Swal.fire({
                title: 'Conciliando pagos...',
                html: 'Procesando pagos. Esto puede tardar unos segundos.',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: function() { Swal.showLoading(); }
            });
            document.getElementById('formAutoReconcile').submit();
        }
    });
}

function reconcileSingle(paymentId) {
    Swal.fire({
        title: 'Conciliando...',
        allowOutsideClick: false,
        allowEscapeKey: false,
        didOpen: function() { Swal.showLoading(); }
    });

    fetch('{{ url("admin/meli/payments") }}/' + paymentId + '/reconcile', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            Swal.fire({ icon: 'success', title: 'Conciliado', text: data.message, timer: 2000, showConfirmButton: false });
            setTimeout(function() { location.reload(); }, 2000);
        } else {
            Swal.fire({ icon: 'warning', title: 'Sin Match', text: data.message });
        }
    })
    .catch(function(err) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexion.' });
    });
}

function showManualModal(paymentId, paymentCode, amount) {
    currentPaymentId = paymentId;
    document.getElementById('modalPaymentId').textContent = '#' + paymentCode;
    document.getElementById('modalPaymentAmount').textContent = '$' + parseFloat(amount).toLocaleString('es-AR', {minimumFractionDigits: 2});
    document.getElementById('manualOrderId').value = '';
    var selectEl = document.getElementById('manualOrderSelect');
    if (selectEl) selectEl.value = '';
    new bootstrap.Modal(document.getElementById('manualReconcileModal')).show();
}

function submitManualReconcile() {
    var orderId = document.getElementById('manualOrderId').value;
    if (!orderId) {
        Swal.fire({ icon: 'warning', title: 'Falta orden', text: 'Ingrese un numero de orden.' });
        return;
    }

    bootstrap.Modal.getInstance(document.getElementById('manualReconcileModal')).hide();

    Swal.fire({
        title: 'Vinculando...',
        allowOutsideClick: false,
        allowEscapeKey: false,
        didOpen: function() { Swal.showLoading(); }
    });

    fetch('{{ url("admin/meli/payments") }}/' + currentPaymentId + '/manual-reconcile', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ order_id: parseInt(orderId) })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            Swal.fire({ icon: 'success', title: 'Vinculado', text: data.message, timer: 2000, showConfirmButton: false });
            setTimeout(function() { location.reload(); }, 2000);
        } else {
            Swal.fire({ icon: 'error', title: 'Error', text: data.message });
        }
    })
    .catch(function(err) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexion.' });
    });
}
</script>
@endpush