@extends('layouts.app', ['title' => term('nav_payments','Pagos en linea')])

@section('header_actions')
@if(count($availableProviders))
    <button class="btn btn-primary" type="button" data-modal-open="modal-create-link"><i class="fa-solid fa-link"></i>Crear link de pago</button>
@else
    <a class="btn btn-info" href="{{ route('integrations.index') }}"><i class="fa-solid fa-plug"></i>Configurar proveedores</a>
@endif
@endsection

@section('content')
@if(empty($availableProviders))
    <div class="alert" style="background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.32);color:#ffc15f;margin-bottom:16px">
        <i class="fa-solid fa-triangle-exclamation"></i>
        <span>Aun no tienes proveedores de pago configurados. Ve a <a href="{{ route('integrations.index') }}" style="color:var(--gold)"><strong>Configuración → Integraciones</strong></a> y activa <strong>Stripe</strong>, <strong>Conekta</strong> o <strong>Mercado Pago</strong>.</span>
    </div>
@endif

<div class="grid g4" style="margin-bottom:16px">
    <div class="metric"><i class="fa-solid fa-link"></i><div class="metric-val">{{ $totals['count'] }}</div><div class="metric-label">Links generados</div></div>
    <div class="metric"><i class="fa-solid fa-hourglass"></i><div class="metric-val text-gold">${{ number_format($totals['pending'],0) }}</div><div class="metric-label">Pendientes</div></div>
    <div class="metric"><i class="fa-solid fa-circle-check"></i><div class="metric-val text-success">${{ number_format($totals['paid'],0) }}</div><div class="metric-label">Cobrados</div></div>
    <div class="metric"><i class="fa-solid fa-plug"></i><div class="metric-val">{{ count($availableProviders) }}/3</div><div class="metric-label">Proveedores activos</div></div>
</div>

<div class="card">
    <div class="card-head"><div><div class="card-title">Historial de links de pago</div><div class="sub">Stripe · Conekta · Mercado Pago</div></div></div>
    <div class="table-wrap">
        <table>
            <thead><tr><th>Cliente</th><th>Concepto</th><th>Provider</th><th>Monto</th><th>Estado</th><th>Fecha</th><th>Acciones</th></tr></thead>
            <tbody>
            @forelse($links as $link)
                <tr>
                    <td><strong>{{ $link->account?->client?->name ?? '—' }}</strong></td>
                    <td>{{ $link->concept ?: '—' }}</td>
                    <td><span class="badge blue">{{ ucfirst($link->provider) }}</span></td>
                    <td><strong>${{ number_format($link->amount, 2) }}</strong></td>
                    <td>
                        <span class="badge {{ $link->status === 'paid' ? 'green' : ($link->status === 'pending' ? 'amber' : ($link->status === 'awaiting_config' ? 'red' : 'gray')) }}">
                            {{ $link->status === 'awaiting_config' ? 'falta config' : $link->status }}
                        </span>
                    </td>
                    <td>{{ $link->created_at->format('d/m/Y H:i') }}</td>
                    <td class="actions">
                        @if($link->status === 'pending' && $link->url && ! str_contains($link->url, 'pending'))
                            <a class="btn btn-sm btn-primary" href="{{ $link->url }}" target="_blank" rel="noopener" data-tip="Abrir link"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>
                            <button class="btn btn-sm" type="button" onclick="copyText('{{ addslashes($link->url) }}', this)" data-tip="Copiar URL"><i class="fa-solid fa-copy"></i></button>
                            @php
                                $phone = $link->account?->client?->phone;
                                if ($phone) {
                                    $cleaned = preg_replace('/\D+/', '', $phone);
                                    if (strlen($cleaned) === 10) $cleaned = $whatsappCountry.$cleaned;
                                    $waMsg = "Hola {$link->account->client->name}, aqui esta tu link para pagar \${$link->amount}: {$link->url}";
                                    $waUrl = 'https://wa.me/'.$cleaned.'?text='.rawurlencode($waMsg);
                                }
                            @endphp
                            @if(! empty($waUrl))
                                <a class="btn btn-sm btn-success" href="{{ $waUrl }}" target="_blank" rel="noopener" data-tip="Enviar por WhatsApp"><i class="fa-brands fa-whatsapp"></i></a>
                            @endif
                        @elseif($link->status === 'awaiting_config')
                            <a class="btn btn-sm btn-info" href="{{ route('integrations.index') }}" data-tip="Configurar proveedor"><i class="fa-solid fa-gear"></i></a>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" style="text-align:center;color:var(--muted);padding:24px">Sin links generados aun. Usa el boton "Crear link de pago" arriba.</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    <div style="margin-top:14px">{{ $links->links() }}</div>
</div>
@endsection

@section('modals')
<div class="modal-backdrop" id="modal-create-link">
    <div class="modal">
        <div class="modal-head"><h3><i class="fa-solid fa-link text-gold"></i> Crear link de pago</h3><button class="modal-close" type="button" data-modal-close>&times;</button></div>
        <form method="post" id="form-payment-link" onsubmit="return submitPaymentLink(event)">
            @csrf
            <div class="modal-body">
                <div class="form-grid">
                    <label>Cuenta del cliente *
                        <select name="account_id" id="payment-account" required onchange="autofillPaymentAmount()">
                            <option value="">— Selecciona cuenta —</option>
                            @foreach($accounts as $account)
                                <option value="{{ $account->id }}" data-balance="{{ $account->total_price - $account->paid_amount }}" data-next="{{ $account->next_payment_amount }}" data-name="{{ $account->client?->name }}">
                                    {{ $account->client?->name }} · saldo ${{ number_format($account->total_price - $account->paid_amount, 0) }}
                                </option>
                            @endforeach
                        </select>
                    </label>
                    <div class="form-grid two">
                        <label>Proveedor *
                            <select name="provider" required>
                                @foreach($availableProviders as $key => $name)
                                    <option value="{{ $key }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </label>
                        <label>Monto MX *<input name="amount" id="payment-amount" type="number" step="0.01" min="1" required></label>
                    </div>
                    <label>Concepto<input name="concept" placeholder="Mensualidad de junio · Casa Valle 14-A" maxlength="200"></label>
                    <div class="sub">El link se generará y aparecerá en el historial. Podrás copiarlo, abrirlo, o enviarlo por WhatsApp con un toque al cliente.</div>
                </div>
            </div>
            <div class="modal-foot">
                <button class="btn btn-ghost" type="button" data-modal-close>Cancelar</button>
                <button class="btn btn-primary" type="submit"><i class="fa-solid fa-bolt"></i>Generar link</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
function autofillPaymentAmount() {
    const sel = document.getElementById('payment-account');
    const opt = sel.options[sel.selectedIndex];
    if (!opt) return;
    const next = parseFloat(opt.dataset.next || 0);
    const balance = parseFloat(opt.dataset.balance || 0);
    document.getElementById('payment-amount').value = next > 0 ? next.toFixed(2) : balance.toFixed(2);
}

function submitPaymentLink(e) {
    e.preventDefault();
    const form = e.target;
    const accountId = form.querySelector('[name=account_id]').value;
    if (!accountId) { toast('Selecciona una cuenta', 'bad'); return false; }
    form.action = '{{ url('/payments/account') }}/' + accountId;
    form.submit();
    return false;
}

function copyText(text, btn) {
    navigator.clipboard.writeText(text).then(() => {
        toast('Link copiado al portapapeles', 'ok');
        const orig = btn.innerHTML;
        btn.innerHTML = '<i class="fa-solid fa-check"></i>';
        setTimeout(() => btn.innerHTML = orig, 1500);
    }).catch(() => toast('No se pudo copiar', 'bad'));
}
</script>
@endpush