@extends('layouts.app')

@section('title', 'Reporte de Gastos — ' . $cliente->nombre_completo)

@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 d-print-none">
        <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('gastos.index') }}">Gastos</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('gastos.reporte.clientes') }}">Reporte por Cliente</a></li>
                    <li class="breadcrumb-item active">{{ $cliente->nombre_completo }}</li>
                </ol>
            </nav>
            <h2 class="fw-bold mb-0" style="color: #0B1F3A;">
                <i class="fa-solid fa-user-tag me-2" style="color: #C9A227;"></i>
                Reporte de Gastos — {{ $cliente->nombre_completo }}
            </h2>
        </div>
        <div class="d-flex gap-2">
            <button onclick="window.print()" class="btn btn-primary-gradient rounded-pill px-4 fw-semibold shadow-sm">
                <i class="fa-solid fa-print me-2" style="color: #C9A227;"></i> Imprimir / PDF
            </button>
            @php
                $waText = "⚖ *REPORTE DE GASTOS*\n\n"
                        . "👤 *Cliente:* " . $cliente->nombre_completo . "\n"
                        . "🗓 *Fecha de Reporte:* " . now()->format('d/m/Y H:i') . "\n\n"
                        . "📊 *DETALLE DE GASTOS*\n\n";
                
                if ($gastosDirectos->count() > 0) {
                    $waText .= "🔸 *Gastos Generales (Sin Expediente)*\n";
                    foreach($gastosDirectos as $gasto) {
                        $fechaGasto = \Carbon\Carbon::parse($gasto->fecha)->format('d/m/y');
                        $waText .= "  ▪ " . $fechaGasto . " - " . $gasto->concepto . ": S/ " . number_format($gasto->monto, 2) . "\n";
                    }
                    $waText .= "  *Subtotal:* S/ " . number_format($gastosDirectos->sum('monto'), 2) . "\n\n";
                }

                foreach($expedientesConGastos as $exp) {
                    $waText .= "📂 *Expediente N° " . $exp->numero_expediente . "*\n";
                    foreach($exp->gastos as $gasto) {
                        $fechaGasto = \Carbon\Carbon::parse($gasto->fecha)->format('d/m/y');
                        $waText .= "  ▪ " . $fechaGasto . " - " . $gasto->concepto . ": S/ " . number_format($gasto->monto, 2) . "\n";
                    }
                    $waText .= "  *Subtotal:* S/ " . number_format($exp->gastos->sum('monto'), 2) . "\n\n";
                }

                $waText .= "💰 *Total General:* S/ " . number_format($montoTotal, 2) . "\n\n"
                        . "Quedamos a su disposición para cualquier duda.";
            @endphp
            <button type="button" class="btn btn-success rounded-pill px-4 fw-semibold shadow-sm" style="background-color: #25D366; border-color: #25D366;"
                onclick="openWaModal({{ json_encode($cliente->telefono ?? '') }}, {{ json_encode($waText) }})">
                <i class="fa-brands fa-whatsapp me-2"></i> WhatsApp
            </button>
        </div>
    </div>

    {{-- Filtro de fechas --}}
    <div class="card border-0 shadow-sm rounded-4 mb-4 d-print-none" style="background: #ffffff; border: 1px solid rgba(201, 162, 39, 0.28) !important;">
        <div class="card-body p-3">
            <form action="{{ route('gastos.reporte.cliente', $cliente) }}" method="GET" class="row g-2 align-items-end">
                <div class="col-md-4">
                    <label class="form-label small fw-semibold mb-1" style="color: #0B1F3A;">Fecha desde</label>
                    <input type="date" class="form-control form-control-sm" name="fecha_desde" value="{{ $fechaDesde }}" style="border-color: rgba(201, 162, 39, 0.35);">
                </div>
                <div class="col-md-4">
                    <label class="form-label small fw-semibold mb-1" style="color: #0B1F3A;">Fecha hasta</label>
                    <input type="date" class="form-control form-control-sm" name="fecha_hasta" value="{{ $fechaHasta }}" style="border-color: rgba(201, 162, 39, 0.35);">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary-gradient btn-sm w-100 fw-semibold">
                        <i class="fa-solid fa-filter me-1" style="color: #C9A227;"></i> Filtrar
                    </button>
                </div>
                @if($fechaDesde || $fechaHasta)
                <div class="col-md-2">
                    <a href="{{ route('gastos.reporte.cliente', $cliente) }}" class="btn btn-outline-primary btn-sm w-100 fw-semibold">
                        <i class="fa-solid fa-rotate-left me-1"></i> Limpiar
                    </a>
                </div>
                @endif
            </form>
        </div>
    </div>

    {{-- Encabezado solo para impresión --}}
    <div class="d-none d-print-flex justify-content-between align-items-center mb-4 border-bottom pb-4" style="border-bottom: 2px solid #C9A227 !important;">
        <div class="d-flex align-items-center gap-3">
            <img src="{{ asset('images/LOGO1.png') }}" alt="Logo" style="height: 110px; width: 110px; object-fit: cover; border-radius: 50%; border: 3px solid #0B1F3A;">
            <div>
                <h3 class="fw-bold mb-0" style="color: #0B1F3A; font-family: 'Playfair Display', 'Georgia', serif; font-size: 1.8rem; letter-spacing: 0.5px; line-height: 1.1;">Cornejo &amp; Cubas<br>Abogados</h3>
                <p class="mb-0 text-muted" style="font-size: 0.95rem;">Gestión de Expedientes Judiciales</p>
            </div>
        </div>
        <div class="text-end" style="color: #0B1F3A;">
            <h4 class="fw-bold mb-2" style="color: #0B1F3A; text-transform: uppercase; letter-spacing: 1px;">Reporte de Gastos</h4>
            <p class="mb-1" style="font-size: 0.9rem;"><strong>Cliente:</strong> {{ $cliente->nombre_completo }}</p>
            @if($cliente->dni_ruc)
                <p class="mb-1" style="font-size: 0.9rem;"><strong>DNI/RUC:</strong> {{ $cliente->dni_ruc }}</p>
            @endif
            @if($fechaDesde || $fechaHasta)
                <p class="mb-1" style="font-size: 0.9rem;"><strong>Período:</strong> {{ $fechaDesde ? \Carbon\Carbon::parse($fechaDesde)->format('d/m/Y') : '—' }} al {{ $fechaHasta ? \Carbon\Carbon::parse($fechaHasta)->format('d/m/Y') : '—' }}</p>
            @endif
            <p class="mb-0 text-muted" style="font-size: 0.8rem;">Generado el {{ now()->format('d/m/Y H:i') }}</p>
        </div>
    </div>

    {{-- Resumen total --}}
    <div class="row g-3 mb-4 d-print-none">
        <div class="col-md-4">
            <div class="card border-0 rounded-4 text-white shadow-sm h-100" style="background: linear-gradient(135deg, #0B1F3A 0%, #162e54 100%); border: 1.5px solid #C9A227 !important;">
                <div class="card-body p-4 d-flex align-items-center gap-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px; background: rgba(201, 162, 39, 0.2);">
                        <i class="fa-solid fa-money-bill-wave fs-3" style="color: #C9A227;"></i>
                    </div>
                    <div>
                        <div class="small fw-semibold" style="color: #F5F1E8; letter-spacing: 0.5px;">TOTAL GASTOS</div>
                        <div class="fs-3 fw-bold" style="color: #C9A227;">S/ {{ number_format($montoTotal, 2) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 rounded-4 shadow-sm h-100" style="background: #F5F1E8; border: 1.5px solid rgba(201, 162, 39, 0.4) !important;">
                <div class="card-body p-4 d-flex align-items-center gap-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px; background: #0B1F3A;">
                        <i class="fa-solid fa-folder-open fs-3" style="color: #C9A227;"></i>
                    </div>
                    <div>
                        <div class="small fw-semibold" style="color: #0B1F3A; letter-spacing: 0.5px;">EXPEDIENTES CON GASTOS</div>
                        <div class="fs-3 fw-bold" style="color: #0B1F3A;">{{ $expedientesConGastos->count() }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-0 rounded-4 shadow-sm h-100 bg-white" style="border: 1.5px solid rgba(201, 162, 39, 0.4) !important;">
                <div class="card-body p-4 d-flex align-items-center gap-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:56px;height:56px; background: rgba(201, 162, 39, 0.2);">
                        <i class="fa-solid fa-receipt fs-3" style="color: #C9A227;"></i>
                    </div>
                    <div>
                        <div class="small fw-semibold" style="color: #0B1F3A; letter-spacing: 0.5px;">TOTAL REGISTROS</div>
                        <div class="fs-3 fw-bold" style="color: #0B1F3A;">{{ $gastosDirectos->count() + $expedientesConGastos->sum(fn($e) => $e->gastos->count()) }}</div>
                    </div>
                </div>
            </div>  
        </div>
    </div>

    {{-- Gastos por Expediente --}}
    @forelse($expedientesConGastos as $exp)
    <div class="card border-0 shadow-sm rounded-4 mb-4" style="border: 1px solid rgba(201, 162, 39, 0.25) !important;">
        <div class="card-header bg-white border-0 pt-4 pb-3 px-4 d-flex justify-content-between align-items-start" style="border-bottom: 1px solid rgba(201, 162, 39, 0.18) !important;">
            <div>
                <h5 class="fw-bold mb-0" style="color: #0B1F3A;">
                    <i class="fa-solid fa-folder me-2" style="color: #C9A227;"></i>
                    Expediente N° {{ $exp->numero_expediente }}
                </h5>
                <p class="text-muted small mb-0 mt-1">
                    {{ $exp->materia }}
                    @if($exp->tipo_proceso) · {{ $exp->tipo_proceso }} @endif
                    @if($exp->estado)
                        <span class="badge ms-1 px-3 py-1 fw-semibold" style="background: #F5F1E8; color: #0B1F3A; border: 1px solid #C9A227;">{{ $exp->estado }}</span>
                    @endif
                </p>
            </div>
            <div class="text-end">
                <span class="fw-bold small me-1" style="color: #555555;">Subtotal:</span>
                <span class="fw-bold fs-5" style="color: #0B1F3A;">S/ {{ number_format($exp->gastos->sum('monto'), 2) }}</span>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead style="background: #F5F1E8; border-bottom: 2px solid #C9A227;">
                        <tr>
                            <th class="ps-4" style="color: #0B1F3A; font-weight: 700;">Fecha</th>
                            <th style="color: #0B1F3A; font-weight: 700;">Concepto</th>
                            <th style="color: #0B1F3A; font-weight: 700;">Categoría</th>
                            <th style="color: #0B1F3A; font-weight: 700;">Registrado por</th>
                            <th class="text-end pe-4" style="color: #0B1F3A; font-weight: 700;">Monto</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($exp->gastos as $gas)
                        <tr>
                            <td class="ps-4 text-muted small">{{ $gas->fecha->format('d/m/Y') }}</td>
                            <td class="fw-semibold" style="color: #333333;">{{ $gas->concepto }}</td>
                            <td><span class="badge px-3 py-1.5 fw-semibold" style="background: #F5F1E8; color: #0B1F3A; border: 1px solid rgba(201, 162, 39, 0.4);">{{ $gas->categoria }}</span></td>
                            <td class="small text-muted">{{ optional($gas->user)->name ?? 'N/A' }}</td>
                            <td class="text-end fw-bold pe-4" style="color: #0B1F3A;">S/ {{ number_format($gas->monto, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot style="background: #F5F1E8; border-top: 2px solid #C9A227;">
                        <tr>
                            <td colspan="4" class="text-end fw-bold ps-4" style="color: #0B1F3A;">Subtotal Expediente:</td>
                            <td class="text-end fw-bold pe-4 fs-6" style="color: #0B1F3A;">S/ {{ number_format($exp->gastos->sum('monto'), 2) }}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    @empty
    @endforelse

    {{-- Gastos directos (sin expediente) --}}
    @if($gastosDirectos->count() > 0)
    <div class="card border-0 shadow-sm rounded-4 mb-4" style="border: 1px solid rgba(201, 162, 39, 0.25) !important;">
        <div class="card-header bg-white border-0 pt-4 pb-3 px-4 d-flex justify-content-between align-items-center" style="border-bottom: 1px solid rgba(201, 162, 39, 0.18) !important;">
            <h5 class="fw-bold mb-0" style="color: #0B1F3A;">
                <i class="fa-solid fa-circle-dot me-2" style="color: #C9A227;"></i>
                Gastos Generales del Cliente
                <span class="text-muted small fw-normal">(sin expediente asignado)</span>
            </h5>
            <span class="fw-bold fs-5" style="color: #0B1F3A;">S/ {{ number_format($gastosDirectos->sum('monto'), 2) }}</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead style="background: #F5F1E8; border-bottom: 2px solid #C9A227;">
                        <tr>
                            <th class="ps-4" style="color: #0B1F3A; font-weight: 700;">Fecha</th>
                            <th style="color: #0B1F3A; font-weight: 700;">Concepto</th>
                            <th style="color: #0B1F3A; font-weight: 700;">Categoría</th>
                            <th style="color: #0B1F3A; font-weight: 700;">Registrado por</th>
                            <th class="text-end pe-4" style="color: #0B1F3A; font-weight: 700;">Monto</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($gastosDirectos as $gas)
                        <tr>
                            <td class="ps-4 text-muted small">{{ $gas->fecha->format('d/m/Y') }}</td>
                            <td class="fw-semibold" style="color: #333333;">{{ $gas->concepto }}</td>
                            <td><span class="badge px-3 py-1.5 fw-semibold" style="background: #F5F1E8; color: #0B1F3A; border: 1px solid rgba(201, 162, 39, 0.4);">{{ $gas->categoria }}</span></td>
                            <td class="small text-muted">{{ optional($gas->user)->name ?? 'N/A' }}</td>
                            <td class="text-end fw-bold pe-4" style="color: #0B1F3A;">S/ {{ number_format($gas->monto, 2) }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    @endif

    @if($gastosDirectos->count() === 0 && $expedientesConGastos->count() === 0)
    <div class="text-center py-5 text-muted">
        <div class="fs-1 mb-3" style="color: #C9A227;"><i class="fa-solid fa-receipt"></i></div>
        <p class="fw-medium" style="color: #555555;">No se encontraron gastos para este cliente en el período seleccionado.</p>
    </div>
    @endif

    {{-- Total general al pie --}}
    @if($montoTotal > 0)
    <div class="card border-0 shadow rounded-4 text-white mt-4" style="background: linear-gradient(135deg, #0B1F3A 0%, #162e54 100%); border: 2px solid #C9A227 !important; box-shadow: 0 10px 25px rgba(11, 31, 58, 0.25) !important;">
        <div class="card-body p-4 d-flex flex-column flex-sm-row justify-content-between align-items-center gap-3">
            <span class="fw-bold fs-5 text-center text-sm-start" style="color: #F5F1E8;">
                <i class="fa-solid fa-scale-balanced me-2" style="color: #C9A227;"></i>
                TOTAL DE GASTOS
            </span>
            <span class="fw-bold fs-2" style="color: #C9A227; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
                S/ {{ number_format($montoTotal, 2) }}
            </span>
        </div>
    </div>
    @endif

</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;"></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 imprimir el 
                            <span class="fw-semibold" style="color: #0B1F3A;">
                                <i class="fa-solid fa-file-pdf me-1" style="color: #C9A227;"></i>PDF
                            </span>
                            desde la página y adjuntarlo manualmente.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('styles')
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;500;600;700&display=swap');

.container-fluid {
    font-family: 'Inter', sans-serif;
}

@media print {
    body * { visibility: hidden; }
    .container-fluid, .container-fluid * { visibility: visible; }
    .d-print-none { display: none !important; }
    
    /* Forzar a los navegadores a imprimir los colores de fondo, badges y gradientes */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }
    
    .card { border: 1px solid #e5e7eb !important; box-shadow: none !important; }
    .table th, .table td { border-color: #e5e7eb !important; }
    .badge { border: 1px solid #ccc !important; }
}
</style>
@endsection
@section('scripts')
<script>
    const modalWhatsapp = new bootstrap.Modal(document.getElementById('modalWhatsapp'));
    const inputTelefono = document.getElementById('inputTelefono');
    const previewMensaje = document.getElementById('previewMensaje');
    const btnAbrirWhatsapp = document.getElementById('btnAbrirWhatsapp');
    const btnCopiar = document.getElementById('btnCopiar');
    const copiadoOk = document.getElementById('copiadoOk');

    function openWaModal(telefono, mensaje) {
        inputTelefono.value = telefono;
        previewMensaje.value = mensaje;
        updateWaLink();
        modalWhatsapp.show();
    }

    function updateWaLink() {
        const tel = inputTelefono.value.replace(/[^0-9]/g, '');
        const msg = encodeURIComponent(previewMensaje.value);
        if (tel) {
            btnAbrirWhatsapp.href = `https://wa.me/${tel}?text=${msg}`;
            btnAbrirWhatsapp.classList.remove('disabled');
        } else {
            btnAbrirWhatsapp.href = '#';
            btnAbrirWhatsapp.classList.add('disabled');
        }
    }

    inputTelefono.addEventListener('input', updateWaLink);
    previewMensaje.addEventListener('input', updateWaLink);

    btnCopiar.addEventListener('click', function() {
        previewMensaje.select();
        document.execCommand('copy');
        copiadoOk.style.display = 'block';
        setTimeout(() => { copiadoOk.style.display = 'none'; }, 2500);
    });
</script>
@endsection
@endsection