@extends('layouts.app')

@section('title', 'Estado de Cuenta del Cliente')

@section('content')
<div class="container-fluid p-0">

    {{-- HEADER --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Inicio</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('finanzas.dashboard') }}">Finanzas</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('facturas.index') }}">Facturación</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Estado de Cuenta</li>
                </ol>
            </nav>
            <h2 class="fw-bold mb-0">
                <i class="fa-solid fa-file-invoice-dollar me-2" style="color: #C9A227;"></i>
                Estado de Cuenta por Cliente
            </h2>
            <p class="text-muted small mb-0 mt-1">Genera el PDF y comparte el resumen por WhatsApp</p>
        </div>
    </div>

    {{-- GRID DE CLIENTES --}}
    <div class="row g-4">
        @forelse($clientes as $cliente)
            @php
                $facturas      = $cliente->facturas;
                $totalAcordado = $facturas->sum('monto_total');
                $totalAbonado  = $facturas->sum(fn($f) => $f->pagos->sum('monto_pagado'));
                $totalDeuda    = $facturas->sum('deuda_restante');
                $nFacturas     = $facturas->count();
                $nPendientes   = $facturas->where('estado', '!=', 'Pagado')->count();

                // Porcentaje global pagado
                $pct = $totalAcordado > 0 ? min(($totalAbonado / $totalAcordado) * 100, 100) : 0;

                // Teléfono limpio para WhatsApp
                $tel = preg_replace('/[^0-9]/', '', $cliente->telefono ?? '');
                if ($tel && strlen($tel) === 9 && str_starts_with($tel, '9')) {
                    $tel = '51' . $tel;
                }
            @endphp

            <div class="col-xl-4 col-md-6">
                <div class="card shadow-sm rounded-4 h-100" style="border: 1px solid rgba(201, 162, 39, 0.25) !important;">

                    {{-- Card header --}}
                    <div class="card-header bg-white border-0 pt-4 px-4 pb-2 d-flex justify-content-between align-items-start">
                        <div>
                            <div class="fw-bold fs-6" style="color: #0B1F3A;">{{ $cliente->nombre_completo }}</div>
                            @if($cliente->empresa)
                                <div class="small text-muted">{{ $cliente->empresa }}</div>
                            @endif
                            @if($cliente->dni_ruc)
                                <div class="small text-muted"><i class="fa-solid fa-id-card fa-xs me-1"></i>{{ $cliente->dni_ruc }}</div>
                            @endif
                        </div>
                        <div class="text-end">
                            @if($nPendientes > 0)
                                <span class="badge fw-semibold rounded-pill" style="background: #C9A227; color: #0B1F3A;">{{ $nPendientes }} pendiente{{ $nPendientes > 1 ? 's' : '' }}</span>
                            @else
                                <span class="badge fw-semibold rounded-pill" style="background: #0B1F3A; color: #ffffff;"><i class="fa-solid fa-check me-1" style="color: #C9A227;"></i>Al día</span>
                            @endif
                        </div>
                    </div>

                    {{-- Resumen financiero --}}
                    <div class="card-body px-4 pt-0 pb-3">
                        @if($nFacturas === 0)
                            <div class="text-center text-muted py-3 small">
                                <i class="fa-regular fa-folder-open fa-2x mb-2 d-block" style="color: #C9A227;"></i>
                                Sin RH registrados
                            </div>
                        @else
                            <div class="row g-2 mt-2 text-center">
                                <div class="col-4">
                                    <div class="rounded-3 py-2 px-1" style="background: #F5F1E8;">
                                        <div class="small text-muted" style="font-size:10px;">Acordado</div>
                                        <div class="fw-bold" style="font-size:13px; color: #0B1F3A;">S/ {{ number_format($totalAcordado, 2) }}</div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="rounded-3 py-2 px-1" style="background: #F5F1E8; border: 1px solid rgba(11, 31, 58, 0.15);">
                                        <div class="small fw-semibold" style="font-size:10px; color: #0B1F3A;">Abonado</div>
                                        <div class="fw-bold" style="font-size:13px; color: #0B1F3A;">S/ {{ number_format($totalAbonado, 2) }}</div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="rounded-3 py-2 px-1" style="background: #F5F1E8; border: 1px solid rgba(201, 162, 39, 0.4);">
                                        <div class="small fw-semibold" style="font-size:10px; color: #0B1F3A;">Deuda</div>
                                        <div class="fw-bold" style="font-size:13px; color: {{ $totalDeuda > 0 ? '#C9A227' : '#0B1F3A' }};">S/ {{ number_format($totalDeuda, 2) }}</div>
                                    </div>
                                </div>
                            </div>

                            {{-- Barra de progreso --}}
                            <div class="mt-3">
                                <div class="d-flex justify-content-between" style="font-size:10px;">
                                    <span class="text-muted">Progreso de pago</span>
                                    <span class="fw-bold" style="color: #0B1F3A;">{{ number_format($pct, 0) }}%</span>
                                </div>
                                <div class="progress rounded-pill mt-1" style="height: 7px; background: #F5F1E8; border: 1px solid rgba(201, 162, 39, 0.25);">
                                    <div class="progress-bar rounded-pill" style="width: {{ $pct }}%; background: linear-gradient(90deg, #0B1F3A, #C9A227);"></div>
                                </div>
                            </div>

                            <div class="text-muted mt-2" style="font-size:11px;">
                                <i class="fa-solid fa-receipt fa-xs me-1" style="color: #C9A227;"></i>{{ $nFacturas }} RH
                                @if($cliente->telefono)
                                    &nbsp;·&nbsp; <i class="fa-solid fa-phone fa-xs me-1"></i>{{ $cliente->telefono }}
                                @endif
                            </div>
                        @endif
                    </div>

                    {{-- Botones de acción --}}
                    <div class="card-footer bg-white border-0 px-4 pb-4 pt-0">
                        <div class="d-flex gap-2">
                            {{-- PDF --}}
                            <a href="{{ route('estado-cuenta.pdf', $cliente->id) }}"
                               class="btn btn-outline-primary rounded-pill flex-fill btn-sm fw-semibold"
                               target="_blank"
                               title="Ver PDF del estado de cuenta">
                                <i class="fa-solid fa-file-pdf me-1"></i> PDF
                            </a>

                            {{-- WhatsApp --}}
                            @if($nFacturas > 0)
                                <button type="button"
                                        class="btn rounded-pill flex-fill btn-sm fw-semibold btn-whatsapp"
                                        style="background: #0B1F3A; color: #ffffff; border: 1px solid #C9A227;"
                                        data-cliente-id="{{ $cliente->id }}"
                                        data-cliente-nombre="{{ $cliente->nombre_completo }}"
                                        data-telefono="{{ $tel }}"
                                        title="Enviar resumen por WhatsApp">
                                    <i class="fa-brands fa-whatsapp me-1" style="color: #C9A227;"></i> WhatsApp
                                </button>
                            @else
                                <button class="btn btn-secondary rounded-pill flex-fill btn-sm" disabled>
                                    <i class="fa-brands fa-whatsapp me-1"></i> WhatsApp
                                </button>
                            @endif
                        </div>
                    </div>

                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body text-center py-5 text-muted">
                        <div class="fs-1 mb-3"><i class="fa-regular fa-users" style="color: #C9A227;"></i></div>
                        <p class="mb-0">No hay clientes registrados en el sistema.</p>
                    </div>
                </div>
            </div>
        @endforelse
    </div>

</div>

{{-- ============ MODAL PREVISUALIZACIÓN WHATSAPP ============ --}}
<div class="modal fade" id="modalWhatsapp" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header border-0 rounded-top-4" style="background: linear-gradient(135deg, #0B1F3A 0%, #162e54 100%); color: #ffffff; border-bottom: 2px solid #C9A227;">
                <h5 class="modal-title fw-bold text-white">
                    <i class="fa-brands fa-whatsapp me-2" style="color: #C9A227;"></i>
                    Mensaje para WhatsApp
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div class="row g-3">
                    <div class="col-md-8">
                        {{-- Previsualización del mensaje --}}
                        <label class="form-label small fw-semibold text-muted">
                            Vista previa — <span style="color: #0B1F3A;">puedes editarlo antes de enviar</span>:
                        </label>
                        <textarea id="previewMensaje"
                                  class="form-control rounded-3 border"
                                  rows="18"
                                  style="background: #F5F1E8; font-family: monospace; font-size: 12px; line-height: 1.6; resize: vertical; border-color: rgba(201, 162, 39, 0.3) !important;"
                                  readonly></textarea>
                    </div>
                    <div class="col-md-4">
                        {{-- Número de teléfono --}}
                        <label class="form-label small fw-semibold text-muted">Número WhatsApp:</label>
                        <div class="input-group mb-3">
                            <span class="input-group-text" style="background: #F5F1E8; border-color: rgba(201, 162, 39, 0.3);"><i class="fa-brands fa-whatsapp" style="color: #0B1F3A;"></i></span>
                            <input type="text" id="inputTelefono" class="form-control"
                                   placeholder="+51 999 999 999">
                        </div>
                        <div class="small text-muted mb-3">
                            <i class="fa-solid fa-circle-info me-1" style="color: #C9A227;"></i>
                            Se usa el teléfono registrado del cliente. Puedes modificarlo aquí si es necesario.
                        </div>

                        {{-- Copiar mensaje --}}
                        <button type="button" id="btnCopiar"
                                class="btn btn-outline-primary rounded-pill w-100 mb-2 fw-semibold">
                            <i class="fa-solid fa-copy me-1"></i> Copiar Mensaje
                        </button>
                        <div id="copiadoOk" class="text-center small mb-2" style="color: #0B1F3A; font-weight: 600; display: none;">
                            <i class="fa-solid fa-circle-check me-1" style="color: #C9A227;"></i> ¡Mensaje copiado al portapapeles!
                        </div>

                        {{-- Abrir WhatsApp --}}
                        <a href="#" id="btnAbrirWhatsapp" target="_blank"
                           class="btn btn-primary-gradient w-100 fw-bold rounded-pill">
                            <i class="fa-brands fa-whatsapp me-1" style="color: #C9A227;"></i> Abrir WhatsApp
                        </a>

                        <div class="mt-3 rounded-3 p-2 small text-muted text-center" style="background: #F5F1E8; border: 1px solid rgba(201, 162, 39, 0.25);">
                            También puedes ver el
                            <a href="#" id="linkPdfModal" target="_blank" class="fw-semibold" style="color: #0B1F3A;">
                                <i class="fa-solid fa-file-pdf me-1" style="color: #C9A227;"></i>PDF
                            </a>
                            y adjuntarlo manualmente.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {

    const modalEl     = document.getElementById('modalWhatsapp');
    const modal       = new bootstrap.Modal(modalEl);
    const previewEl   = document.getElementById('previewMensaje');
    const inputTel    = document.getElementById('inputTelefono');
    const btnAbrir    = document.getElementById('btnAbrirWhatsapp');
    const btnCopiar   = document.getElementById('btnCopiar');
    const linkPdf     = document.getElementById('linkPdfModal');

    let mensajeActual = '';

    // Reconstruir la URL de WhatsApp con el teléfono editado
    inputTel.addEventListener('input', function () {
        const tel = this.value.replace(/[^0-9]/g, '');
        const url = tel
            ? 'https://wa.me/' + tel + '?text=' + encodeURIComponent(mensajeActual)
            : 'https://wa.me/?text='              + encodeURIComponent(mensajeActual);
        btnAbrir.href = url;
    });

    // Click en botón WhatsApp de cada tarjeta
    document.querySelectorAll('.btn-whatsapp').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const clienteId = this.dataset.clienteId;
            const telefono  = this.dataset.telefono;

            // Feedback visual
            btn.disabled  = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Generando...';

            const csrfToken = document.querySelector('meta[name="csrf-token"]');
            const headers   = { 'Accept': 'application/json' };
            if (csrfToken) headers['X-CSRF-TOKEN'] = csrfToken.content;

            fetch('/facturas/estado-cuenta/' + clienteId + '/whatsapp', { headers })
                .then(function (response) {
                    if (!response.ok) {
                        return response.text().then(function (text) {
                            throw new Error('HTTP ' + response.status + ': ' + text.substring(0, 200));
                        });
                    }
                    return response.json();
                })
                .then(function (data) {
                    mensajeActual = data.mensaje;

                    // Rellenar el textarea (.value, no .textContent)
                    previewEl.value   = data.mensaje;
                    inputTel.value    = telefono ? ('+' + telefono) : '';
                    btnAbrir.href     = data.wa_url;
                    linkPdf.href      = '/facturas/estado-cuenta/' + clienteId + '/pdf';

                    // Resetear botón copiar
                    var copiadoOk = document.getElementById('copiadoOk');
                    if (copiadoOk) copiadoOk.style.display = 'none';
                    btnCopiar.innerHTML = '<i class="fa-solid fa-copy me-1"></i> Copiar Mensaje';
                    btnCopiar.classList.remove('btn-success');
                    btnCopiar.classList.add('btn-outline-secondary');

                    modal.show();
                })
                .catch(function (err) {
                    console.error('Error WhatsApp:', err);
                    alert('Error al generar el mensaje: ' + err.message);
                })
                .finally(function () {
                    btn.disabled  = false;
                    btn.innerHTML = '<i class="fa-brands fa-whatsapp me-1"></i> WhatsApp';
                });
        });
    });

    // Copiar al portapapeles — usa select()+execCommand (funciona en HTTP/Laragon)
    btnCopiar.addEventListener('click', function () {
        if (!mensajeActual) return;

        // Quitar readonly, seleccionar todo y copiar
        previewEl.removeAttribute('readonly');
        previewEl.focus();
        previewEl.select();
        previewEl.setSelectionRange(0, 99999);

        var copiado = false;
        try { copiado = document.execCommand('copy'); } catch (e) {}
        previewEl.setAttribute('readonly', 'readonly');

        var copiadoOk = document.getElementById('copiadoOk');

        if (copiado) {
            btnCopiar.innerHTML = '<i class="fa-solid fa-check me-1"></i> Copiado!';
            btnCopiar.classList.remove('btn-outline-secondary');
            btnCopiar.classList.add('btn-success');
            if (copiadoOk) copiadoOk.style.display = 'block';
            setTimeout(function () {
                btnCopiar.innerHTML = '<i class="fa-solid fa-copy me-1"></i> Copiar Mensaje';
                btnCopiar.classList.remove('btn-success');
                btnCopiar.classList.add('btn-outline-secondary');
                if (copiadoOk) copiadoOk.style.display = 'none';
            }, 3000);
        } else {
            // Último recurso: dejar el textarea seleccionado para Ctrl+C manual
            previewEl.removeAttribute('readonly');
            previewEl.focus();
            previewEl.select();
            btnCopiar.innerHTML = '<i class="fa-solid fa-hand-pointer me-1"></i> Presiona Ctrl+C';
        }
    });

});
</script>
@endsection

@endsection