@extends('layouts.app')
@section('title', $recibo->exists ? 'Editar recibo' : 'Registrar recibo')

@php($clientesJs = $clientes->map(fn ($c) => [
    'id' => $c->id,
    'tipo' => $c->tipo_documento->value,
    'numero' => $c->numero_documento,
    'razon' => $c->razon_social,
])->values())

@section('content')
    <div class="page-head"><h1>{{ $recibo->exists ? 'Editar recibo' : 'Registrar recibo por honorarios' }}</h1></div>

    <div class="alert alert-info">Registra aquí los datos del recibo que <strong>ya emitiste en SUNAT SOL</strong>.</div>

    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ $recibo->exists ? route('recibos.update', $recibo) : route('recibos.store') }}">
                @csrf
                @if($recibo->exists) @method('PUT') @endif

                <h3 style="margin-top:0">Datos del recibo</h3>
                <div class="form-grid">
                    <div class="field">
                        <label>Serie</label>
                        <input name="serie" value="{{ old('serie', $recibo->serie) }}" placeholder="E001" maxlength="6">
                    </div>
                    <div class="field">
                        <label>Número</label>
                        <input name="numero" value="{{ old('numero', $recibo->numero) }}" placeholder="1">
                    </div>
                    <div class="field">
                        <label>Fecha de emisión *</label>
                        <input type="date" name="fecha_emision" value="{{ old('fecha_emision', optional($recibo->fecha_emision)->format('Y-m-d') ?? now()->format('Y-m-d')) }}" required>
                    </div>
                    <div class="field">
                        <label>Fecha de pago</label>
                        <input type="date" name="fecha_pago" value="{{ old('fecha_pago', optional($recibo->fecha_pago)->format('Y-m-d')) }}">
                    </div>
                </div>

                <h3>Cliente (quien paga el servicio)</h3>
                <div class="form-grid">
                    <div class="field">
                        <label>Tomar de mis clientes</label>
                        <select id="selCliente">
                            <option value="">— manual —</option>
                            @foreach($clientes as $cl)
                                <option value="{{ $cl->id }}">{{ $cl->numero_documento }} · {{ $cl->razon_social }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Tipo doc. *</label>
                        <select name="cliente_tipo_documento" id="cliTipo" required>
                            @foreach($tipos as $t)
                                <option value="{{ $t->value }}" @selected(old('cliente_tipo_documento', $recibo->cliente_tipo_documento?->value) === $t->value)>{{ $t->label() }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>N° documento *</label>
                        <input name="cliente_numero_documento" id="cliNum" value="{{ old('cliente_numero_documento', $recibo->cliente_numero_documento) }}" required>
                    </div>
                    <div class="field">
                        <label>Nombre / Razón social *</label>
                        <input name="cliente_razon_social" id="cliRazon" value="{{ old('cliente_razon_social', $recibo->cliente_razon_social) }}" required>
                    </div>
                </div>

                <h3>Servicio e importes</h3>
                <div class="form-grid">
                    <div class="field">
                        <label>Descripción del servicio *</label>
                        <input name="descripcion_servicio" value="{{ old('descripcion_servicio', $recibo->descripcion_servicio) }}" required>
                    </div>
                    <div class="field">
                        <label>Moneda *</label>
                        <select name="moneda" required>
                            @foreach(['PEN'=>'Soles','USD'=>'Dólares','EUR'=>'Euros'] as $v=>$l)
                                <option value="{{ $v }}" @selected(old('moneda', $recibo->moneda) === $v)>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="field">
                        <label>Monto bruto (honorario) *</label>
                        <input type="number" step="0.01" min="0" name="monto_bruto" id="bruto" value="{{ old('monto_bruto', $recibo->monto_bruto) }}" required>
                    </div>
                    <div class="field">
                        <label>Retención de renta</label>
                        <label style="display:flex;gap:8px;align-items:center;font-weight:400">
                            <input type="checkbox" name="aplica_retencion" id="aplica" value="1" style="width:auto" @checked(old('aplica_retencion', $recibo->aplica_retencion)) >
                            Aplica retención
                        </label>
                        <div style="display:flex;gap:6px;align-items:center;margin-top:6px">
                            <input type="number" step="0.01" min="0" max="100" name="porcentaje_retencion" id="pct" value="{{ old('porcentaje_retencion', $recibo->porcentaje_retencion ?? 8) }}" style="max-width:90px">
                            <span class="muted">% (8% por defecto en 4ta categoría)</span>
                        </div>
                    </div>
                    <div class="field">
                        <label>Estado *</label>
                        <select name="estado" required>
                            @foreach(['emitido'=>'Emitido','pagado'=>'Pagado','anulado'=>'Anulado'] as $v=>$l)
                                <option value="{{ $v }}" @selected(old('estado', $recibo->estado) === $v)>{{ $l }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="card" style="background:#f8fafc;margin-top:12px">
                    <div class="card-body" style="display:flex;gap:28px;flex-wrap:wrap">
                        <div><span class="muted">Retención:</span> <strong>S/ <span id="outRet">0.00</span></strong></div>
                        <div><span class="muted">Neto a recibir:</span> <strong style="color:var(--verde)">S/ <span id="outNeto">0.00</span></strong></div>
                    </div>
                </div>

                <div class="field" style="margin-top:14px;max-width:520px">
                    <label>Observación</label>
                    <textarea name="observacion" rows="2">{{ old('observacion', $recibo->observacion) }}</textarea>
                </div>

                <div class="form-actions">
                    <button class="btn btn-primary">Guardar</button>
                    <a href="{{ route('recibos.index') }}" class="btn btn-ghost">Cancelar</a>
                </div>
            </form>
        </div>
    </div>

    <script>
        const CLIENTES = @json($clientesJs);
        const sel = document.getElementById('selCliente');
        sel.addEventListener('change', () => {
            const c = CLIENTES.find(x => x.id == sel.value);
            if (c) {
                document.getElementById('cliTipo').value = c.tipo;
                document.getElementById('cliNum').value = c.numero;
                document.getElementById('cliRazon').value = c.razon;
            }
        });

        const bruto = document.getElementById('bruto');
        const aplica = document.getElementById('aplica');
        const pct = document.getElementById('pct');
        function calc() {
            const b = parseFloat(bruto.value) || 0;
            const ret = aplica.checked ? Math.round(b * (parseFloat(pct.value) || 0)) / 100 : 0;
            document.getElementById('outRet').textContent = ret.toFixed(2);
            document.getElementById('outNeto').textContent = (b - ret).toFixed(2);
        }
        [bruto, aplica, pct].forEach(el => el.addEventListener('input', calc));
        aplica.addEventListener('change', calc);
        calc();
    </script>
@endsection