@php
    $tipoActual = old('tipo', $cupon->tipo ?? 'porcentaje');
@endphp

<div class="row">
    <div class="col-md-4 mb-3">
        <label class="form-label">Código</label>
        <input type="text" class="form-control @error('codigo') is-invalid @enderror" name="codigo" value="{{ old('codigo', $cupon->codigo ?? '') }}" required style="text-transform: uppercase;">
        @error('codigo')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4 mb-3">
        <label class="form-label">Tipo de descuento</label>
        <select class="form-select @error('tipo') is-invalid @enderror" name="tipo" id="tipo-cupon" required>
            <option value="porcentaje" @selected($tipoActual === 'porcentaje')>Porcentaje</option>
            <option value="monto_fijo" @selected($tipoActual === 'monto_fijo')>Monto fijo</option>
        </select>
        @error('tipo')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4 mb-3">
        <label class="form-label">Origen</label>
        <select class="form-select @error('origen') is-invalid @enderror" name="origen" required>
            <option value="manual" @selected(old('origen', $cupon->origen ?? 'manual') === 'manual')>Manual</option>
            <option value="sistema" @selected(old('origen', $cupon->origen ?? '') === 'sistema')>Sistema</option>
        </select>
        <div class="form-text">"Sistema" queda reservado para cupones que en el futuro genere un proceso automático (ej. fidelización).</div>
        @error('origen')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

<div class="row">
    <div class="col-md-6 mb-3" id="campo-porcentaje">
        <label class="form-label">Porcentaje de descuento (%)</label>
        <input type="number" step="0.01" min="0.01" max="100" class="form-control @error('porcentaje') is-invalid @enderror" name="porcentaje" value="{{ old('porcentaje', $cupon->porcentaje ?? '') }}">
        @error('porcentaje')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-6 mb-3" id="campo-monto">
        <label class="form-label">Monto fijo de descuento</label>
        <input type="number" step="0.01" min="0.01" class="form-control @error('monto') is-invalid @enderror" name="monto" value="{{ old('monto', $cupon->monto ?? '') }}">
        <div class="form-text">Si el subtotal es menor al monto, el descuento se limita al subtotal (nunca queda en negativo).</div>
        @error('monto')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

<div class="row">
    <div class="col-md-4 mb-3">
        <label class="form-label">Fecha de inicio (opcional)</label>
        <input type="date" class="form-control @error('fecha_inicio') is-invalid @enderror" name="fecha_inicio" value="{{ old('fecha_inicio', optional($cupon->fecha_inicio ?? null)->format('Y-m-d')) }}">
        @error('fecha_inicio')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4 mb-3">
        <label class="form-label">Fecha de vencimiento (opcional)</label>
        <input type="date" class="form-control @error('fecha_fin') is-invalid @enderror" name="fecha_fin" value="{{ old('fecha_fin', optional($cupon->fecha_fin ?? null)->format('Y-m-d')) }}">
        @error('fecha_fin')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4 mb-3">
        <label class="form-label">Límite de usos (opcional)</label>
        <input type="number" min="1" class="form-control @error('usos_maximos') is-invalid @enderror" name="usos_maximos" value="{{ old('usos_maximos', $cupon->usos_maximos ?? '') }}">
        <div class="form-text">Vacío = usos ilimitados.</div>
        @error('usos_maximos')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
</div>

@if (isset($cupon))
    <p class="text-muted small">Usos hasta ahora: {{ $cupon->usos_actuales }}</p>
@endif

<script>
    (function () {
        var select = document.getElementById('tipo-cupon');
        var campoPorcentaje = document.getElementById('campo-porcentaje');
        var campoMonto = document.getElementById('campo-monto');

        function actualizar() {
            var esPorcentaje = select.value === 'porcentaje';
            campoPorcentaje.style.display = esPorcentaje ? '' : 'none';
            campoMonto.style.display = esPorcentaje ? 'none' : '';
        }

        select.addEventListener('change', actualizar);
        actualizar();
    })();
</script>

<div class="d-flex gap-2">
    <button type="submit" class="btn btn-primary">Guardar</button>
    <a href="{{ route('cupones.index') }}" class="btn btn-secondary">Cancelar</a>
</div>